Vue 인스턴스

생성자

Vuejs는  Vue 생성자 함수로 root Vue를 인스턴스해 부트스트래핑 합니다.

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

Vuejs는 MVVM패턴에 영감을 받았습니다.

vm은 view model의 약자 입니다.

Vue인스턴스를 인스턴스화 할 때,

데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함할 수 있는 option객체를 전달해야 한다.

Vue는 미리 정의된 옵션을 사용하는 컴포넌트 생성자를 사용할 수 있다.

var MyComponent = Vue.extend({
  // 옵션 확장
})
// `MyComponent`의 모든 인스턴스는
// 미리 정의된 확장 옵션과 함께 생성됩니다.
var myComponentInstance = new MyComponent()

나중에 설명이 더 나온다는데, 지금은 모든 Vue의 컴포넌트가 본질적으로 확장된 Vue 인스턴스다.

속성과 메소드

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 속성 설정은 원본 데이터에도 영향을 미칩니다.
vm.a = 2
data.a // -> 2
// ... 당연하게도
data.a = 3
vm.a // -> 3

Vue인스턴스는 안에 data 객체들을 모두 프록시 처리합니다.

프록시 속성은 반응형 입니다.

레퍼런스가 같기 때문이다.

Vue에서는 유용한 인스턴스 속성 및 메소드를 제공한다.

이 프로퍼티들과 메소드는 접두사 $로 접근 가능합니다.

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 는 인스턴스 메소드 입니다.
vm.$watch('a', function (newVal, oldVal) {
  // `vm.a`가 변경되면 호출 됩니다.
})

인스턴스 속성이나 콜백에서 화살표 함수를 사용하지 마십시오. (예: vm.$watch('a', newVal => this.myMethod())). 화살표 함수는 부모 컨텍스트에 바인딩 되어 있으므로 this는 Vue 인스턴스가 아니며 this.myMethod는 정의되지 않습니다.

람다식을 사용하면안된다.

인스턴스 라이프사이클 훅

각 Vue 인스턴스는 데이터 관찰을 설정하고, 템플릿을 컴파일하고, 인스턴스를  DOM에 마운트하고, 데이터가 변경될 때 DOM을 업데이트 해야할 때 일련의 초기화 단계를 거칩니다.

그 과정에서 사용자 정의 로직을 실행할 수 있는 라이플사이클 훅 도 호출됩니다.

created훅은 인스턴스가 생성된 후 실행됩니다.

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 는 vm 인스턴스를 가리킵니다.
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

created말고 여러가지의 훅도 존재한다.

라이프사이클 다이어그램