Vue 인스턴스

모든 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'

이렇게 사용한다.

당연하게도, 라이프사이클 훅을 화살표 함수를 사용하는 것은 특별한 이유가 없는 이상은 지양해야 한다.