[2019.01.12] Vue 인스턴스

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 ( 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) {
                	/* ... */
                });
            }
        }
        }
    });