Instance Lifecycle

Vue 인스턴스

모든 Vue 앱은 Vue 함수로 새 vue인스턴스를 만드는 것부터 시작한다.

var vm = new Vue({
  //옵션
})

Vue는 엄격히 말하면 MVVM pattern과는 연관이 없지만, 디자인은 부분적으로 영향을 받았다.
MVVM pattern은 따로 알아보기로 한다.

Vue 인스턴스가 생성 될 때는 option 객체를 전달해야 한다.
API reference: https://kr.vuejs.org/v2/api/#propsData

데이터와 메소드

Vue 인스턴스 생성 시, data 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가된다. 바인딩 된 값들은 각 속성이 변경 될 때 뷰가 "반응"하여 새로운 값과 일치 시키도록 한다.

// 데이터 객체
var data = { a: 1 }

// Vue인스턴스에 데이터 객체를 추가합니다.
var vm = new Vue({
  data: data
})

// 인스턴스에 있는 속성은
// 원본 데이터에 있는 값을 반환합니다.
vm.a === data.a // => true

// 인스턴스에 있는 속성값을 변경하면
// 원본 데이터에도 영향을 미칩니다.
vm.a = 2
data.a // => 2

// ... 반대로 마찬가지입니다.
data.a = 3
vm.a // => 3

Object.freeze() 를 통해 기존 속성의 변경을 막을 수 있다

Instance Lifecycle Hook

created, mounted, updated, destroyed

https://kr.vuejs.org/v2/api/index.html#

hook의 시점은 다음 사이트를 통해 더욱 자세하게 알 수 있다.

Instance Lifecycle Diagram