[2019.01.12] Vue 인스턴스

smpark·2019년 1월 16일
0

Vue 인스턴스란?

  • Vue 인스턴스란 생성된 Vue 오브젝트 하나
  • Vue 앱을 시작하기 위해 필수적이며, 앱의 진입점이 됨
  • 간단한 템플릿 렌드링부터 데이터 바인딩, 컴포넌트 등 많은 동작 수행

인스턴스 생성

  • 인스턴스를 생성할 때 데이터, 템플릿 메서드 등 옵션값을 전달할 수 있음
 var vm = new Vue({
 		//옵션
 })
  • Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용
  • Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며
    선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성
new Vue({
    el: '#app',
    
    template: '',
    
    data: {},
    
    props: [], // {}
    
    methods: {},
    
    computed: {},
    
    watch: {}
});

el ( string | HTMLElement )
대상이 되는 html element 또는 css selector ( vm.el)template(string)Vue인스턴스의마크업으로사용할문자열템플릿data(ObjectFunction)화면을그리는데사용하는data를반환하는함수또는data객체(vm.el ) **template ( string )** Vue 인스턴스의 마크업으로 사용할 문자열 템플릿 **data ( Object | Function )** 화면을 그리는데 사용하는 data 를 반환하는 함수 또는 data 객체 ( vm.data )
props ( Array<string> | Object )
부모 컴포넌트로부터 전달 받은 property들의 Array 혹은 Object
methods ( [key: string]: Function )
Vue 인스턴스에서 사용되는 메소드. this 컨텍스트를 Vue 인스턴스에 바인딩 합니다.
computed ( [key: string]: Function | { get: Function, set: Function } )
계산된 속성. getter와 setter는 자동으로 this 컨텍스트를 Vue 인스턴스에 바인딩 합니다.
watch ( [key: string]: string | Function | Object | Array )
감시된 속성. Vue 인스턴스에 데이터가 변경되는 시점에 호출

※ 참고
options 속성이나 콜백에 created: () => console.log(this.a) 이나 vm.$watch('a', newValue => this.myMethod()) 와 같은 화살표 함수 사용을 지양하기 바랍니다. 화살표 함수들은 부모 컨텍스트에 바인딩되기 때문에, this 컨텍스트가 호출하는 Vue 인스턴스에서 사용할 경우 Uncaught TypeError: Cannot read property of undefined또는Uncaught TypeError: this.myMethod is not a function와 같은 오류가 발생하게 됩니다.

데이터와 메서드

  • Vue 인스턴스의 데이터는 View에 무언가를 사용자에게 보여 주기 위해 정의
	new Vue({
    	el: '#app',
        data: {
        	message: 'Hello, Vue!', //string
            price: 10000,  //number
            list: ['One','Two'], //list
            object: {  //object
            	a:1,
                b:2,
            }        	
        }
    })
  • 어떤 타입의 데이터 형태도 정의 가능
  • Vue 인스턴스 내부 로직 연산 가능
  • 데이터가 변경되면 화면은 다시 렌더링

라이프사이클

  • 라이프사이클이란 Vue 인스턴스의 생성부터 파괴까지의 일련의 과정
  • 생성 > 마운트 > 업데이트 > 파괴
  • 사용자는 Vue 인스턴스를 생성할 때 전달해던 Option을 통해 라이프사이클 훅을 정의할 수 있음

라이프사이클 다이어그램

  • beforeCreate: Vue 인스턴스가 생성되기 전
  • created: vue 인스턴스가 생성된 후
  • beforeMount: Vue 인스턴스가 마운트되기 전
  • Mounted : Vue 인스턴스가 마운트된 후
  • beforeDestory: Vue 인스턴스가 파괴된기 전
  • Destory: Vue 인스턴스가 파괴된 후
  • beforeUpdate: Vue 인스턴스의 데이터가 변경되어 다시 렌더링하기 전
  • upDated: Vue 인스턴스의 데이터가 변경되어 다시 렌더링한 후

계산된 속성

  • 표현식은 잘 못 사용할 경우 가독성이 떨어져 유지보수가 어려워 질 수 있음
  • Vue 인스턴스의 계산된 속성을 사용하면 종속성이 있는 데이터에 따라 캐시가 됨
  • 종속성이 있는 데이터의 경우 methods보다 computed 를 사용

감시된 속성

  • Vue 인스턴스의 데이터가 변경되는 시점을 감시해 메서드를 호출하는 기능
  • watch
	new Vue({
    	el: '#app',
        data: {
        	search: ''
        },
        watch: {
        	this.$(http.get('/search?value' + value)
            	.then(function (response) {
                	/* ... */
                });
            }
        }
        }
    });
profile
wow!

0개의 댓글