모든 Vue 앱은 함수로 새 Vue 인스턴스를 만드는 것부터 시작한다.
var vm = new Vue({
**// options**
})
Vue 앱은 이렇게 생성된 루트 뷰 인스턴스
로 구성된다.
Root Instance
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
뷰 인스턴스 내에 data 객체를 만들게 되면, 그 안의 모든 속성이 Vue의 반응형 시스템에 추가된다. 단, 인스턴스가 생성될 때 존재하지 않고 후에 추가된 데이터 속성의 경우에는 반응형이 되지 못한다. 반응형 속성이라는 의미는 인스턴스 내의 watcher가 수정사항을 파악하고, 데이터가 변경된다면 화면이 다시 렌더링된다는 의미이다.
var data = { a: 1 } // 데이터 객체
var app = new Vue({ // 뷰 인스턴스. 데이터 객체 data를 뷰 인스턴스 app에 추가한다.
data: data
})
app.a === data.a. // 인스턴스의 데이터 속성은 데이터 객체의 속성값과 같다.
**// 인스턴스와 원본 데이터 각각의 값을 변경하면 상대에게도 영향을 미친다. 서로!**
app.a = 5
data.a // 5
data.a = 10
app.a // 10
**// 데이터가 변경되면 화면은 다시 렌더링된다.**
// 오로지 인스턴스가 생성될 때 존재했던 데이터 속성들만이 반응형이다.
app.new_prop = 'Hi!'
**// 이 친구의 데이터가 변경되어도 화면은 갱신되지 않는다.**
created, mounted, updated, destroyed
등 뷰 컴포넌트의 라이프사이클마다 사용자 정의 로직을 실행할 수 있도록 해 준다. 모든 라이프사이클 훅 안의 this는 해당 훅을 호출하는 뷰 인스턴스를 가리킨다.
예시로 created, 인스턴스가 생성되었을 때 호출되는 라이프사이클의 경우
new Vue({
data: {
a: 1
},
created: function () {
console.log(`a is: ${this.a}`)
}
}) // 'a is: 1'
이렇게 사용한다.
당연하게도, 라이프사이클 훅을 화살표 함수를 사용하는 것은 특별한 이유가 없는 이상은 지양해야 한다.