Vue.js getting Start --02
2017. 9. 23. 10:31ㆍJS&FRONT/Vue.js
오늘은 Vue의 instance 와 Lifecycle 에 대한 내용입니다.
간단하니까.. 금방 끝
Creating a Vue Instance
모든 Vue Application은 Vue 함수를 가지고 새로운 Vue instnace를 생성하는 것으로 부터 시작합니다.
var vm = new Vue({ // options }) |
비록 Model-view-viewmodel(https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel)에 엄격하게 연관되어 있지는 않지만, Vue의 설계는 부분적으로 MVVM pattern에서 영감을 받았습니다.
우리는 가끔 vm(short for ViewModel) 변수를 우리 Vue instance에 참조(refer)할때 사용합니다.
참고 :
여러분이 Vue 인스턴스를 생성할땐, option object를 전달합니다.
이 가이드에서 주요한 점은 여러분이 원하는 행위를 생성하기 위한 이런 옵션들을 어떻게 사용할수 있는지 설명하고 있습니다.
참고로 (for reference), 여러분은 API reference에서 모든 옵션 리스트를 확인해 볼수 있습니다.
Vue application은 new Vue을 가지고 만든 root Vue instance로 구성되어 있고,
선택적으로 중첩되고(nested), 재사용가능한 컴포넌트들의 트리로 구성되어 있습니다.
예를 들면, todo app의 컴포넌트 트리는 아래와 같이 구성될겁니다.
Root Instance |- TodoList |- TodoItem |- DeleteTodoButton |- EditTodoButton |- TodoListFooter |- ClearTodosButton |- TodoListStatistics |
앞으로 the component system에 대해서 좀더 이야기 해볼것입니다.
지금 알아둬야 할 것은 모든 vue 컴포넌트들은 역시 vue 인스턴스라는 것이고, 따라서 같은 옵션 객체를 수용합니다.
(소수의 root-specific option들은 제외됩니다.)
Data and Methods
Vue 인스턴스가 생성되면, 그것은 해당 data 객체안에서 찾은 모든 properties을 Vue의 reactivity system에 추가합니다.
추가된 properties의 값이 변경될 때, view 은 방응 할 것이고, 새로운 값을 매칭하도록 업데이트 됩니다.
//Our data object var data = { a: 1} //The object is added to a Vue instance var vm = new Vue({ data : data }) //These reference the same object vm.a === data.a // ==> true //Setting the property on the instance //also affects the original data vm.a = 2 data.a // ==> 2 //.... and vice-versa(그 반대로도 그렇다) data.a = 3 vm.a // ==> 3 |
이 데이타가 변경될땐, view는 다시 그릴것입니다.
여기서 주의해야 할 점은 데이터 속성은 instance가 생성되었을 때 propeties들이 만들어 진경우에만 반응합니다.
vm.b = 'hi' |
위의 b가 변경될땐, 다른 view 수정이 실행 되지 않습니다.
혹 이후에 property가 필요할 것이란 걸 알았다면,
해당 값이 빈값이나 존재하지 않을 것으로 부터 시작한다면,
초기 값을 설정하기만 하면 됩니다. 예를 들면 아래와 같습니다.
data : { newTodoText : ' ', visitCount : 0, hideCompletedTodos: false, todos: [ ], error: null } |
데이터 속성에 추가것 외에도, Vue 인스턴스는 유용한 인스턴스 속성들과 메소드들을 제공합니다.
사용자 정의된 속성과는 다르게 구분되는 $ 접두어가 있습니다.
예를 들면
var data = { a: 1 } var vm = new Vue({ el : "#example', data: data }) vm.$data === data // ==> true vm.$el === document.getElementById('example') // ==> true // $watch is an instance method vm.$watch('a' , function(newValue, oldValue){ // This callback will be called when 'vm.a' changes }); |
이후에 여러분은 인스턴스 속성과 메소들의 모든 리스트들에 대한 API reference를 참조하세요.
Instance Lifecycle Hooks
각각의 Vue 인스턴스는 생성시에 일련의 초기화 단계를 거치게 됩니다.
예를 들면, 데이터 관찰을 설정하고, 템플릿을 컴파일하고, DOM에 인스턴스를 마운트 하고, 데이터가 변할 때마다 DOM을 수정해야할 필요가 있습니다.
또한(Along the way), lifecycle hooks 라고 불리는 함수를 실행하여,
사용자에게 특정한 단계에서 자신의 코드를 추가하기 할수 있는 기회를 줍니다.
예를 들면 created hook 은 인스턴스가 생성된 후에 코드를 실행할 때 사용됩니다.
new Vue({ data : { a : 1} , create : function(){ // 'this' points to the vm instance console.log('a is: ' + this.a) } }) // ==> "a is : 1" |
인스턴스의 라이프 사이클의 각각의 다른 단계들에서도 다른 hook이 역시 있습니다.
mounted , updated, destroyed 등등..
모든 라이프 사이클 후크는 각 단계를 발생되었을 때 Vue instance을 가르키는 this 컨텍스트와 함께 호출됩니다.
option property 또는 callback 에서 arrow functions 을 사용하지 마세요. created: () => console.log(this.a) 나 vm.$watch('a', newValue=> this.myMethod()) 같은거 말이죠. arrow function이 부모 context에 바운드 되면, this는 여러분이 기대하는 vue instance가 될수 없고, this.a 또는 this.myMethod 은 undefined 될것입니다. |
Lifecycle Diagram
아래는 인스턴스 라이프사이클동안의 다이어그램입니다.
당장(right now) 모든 걸 이해 할 필요는 없지만, 좀더 배우고 만들면, 그것이 유용한 레퍼런스가 될것입니다.
여기까지 입니다.