Vue 인스턴스

Vue 인스턴스 만들기

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

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

Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용합니다.

Vue 인스턴스를 인스턴스화 할 때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함 할 수있는 options 객체를 전달 해야합니다.

전체 옵션 목록은 API reference 에서 찾을 수 있습니다.

Vue 생성자는 미리 정의 된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장 될 수 있습니다.

Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성됩니다.

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

확장된 인스턴스를 만들수는 있으나 대개 템플릿에서 사용자 지정 엘리먼트로 선언적으로 작성하는 것이 좋습니다. 나중에 컴포넌트 시스템에 대해 자세히 설명합니다. 지금은 모든 Vue 컴포넌트가 본질적으로 확장된 Vue 인스턴스라는 것을 알아야 합니다.

속성과 메서드

각 Vue 인스턴스는 data 객체에 있는 모든 속성을 프록시 처리 합니다.

프록시란? 다른 클래스의 인터페이스로 동작하는 클래스이다.

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

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

// 같은 객체를 참조합니다!(프록시 처리되었음을 보여주는 예시, 객체.변수(vm.a) 이런식으로 접근이 가능하다.)
vm.a === data.a; // => true

// 속성 설정은 원본 데이터에도 영향을 미칩니다.
vm.a = 2;
data.a; // => 2

// ... 당연하게도
data.a = 3;
vm.a; // => 3

어떤 속성이 나중에 필요하다는 것을 알고 있으며, 빈 값이거나 존재하지 않은 상태로 시작한다면 아래와 같이 초기값을 지정할 필요가 있습니다.

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

인스턴스 라이프사이클 훅

각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 관찰 설정이 필요한 경우, 템플릿을 컴파일하는 경우, 인스턴스를 DOM에 마운트하는 경우, 그리고 데이터가 변경되어 DOM를 업데이트하는 경우가 있습니다. 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클 훅 도 호출됩니다. 예를 들어, created 훅은 인스턴스가 생성된 후에 호출됩니다. 예:

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

인스턴스 라이프사이클의 여러 단계에서 호출될 다른 훅도 있습니다. 그 예로 mounted,updated 및 destroyed가 있습니다. 모든 라이프사이클 훅은 this 컨텍스트가 호출하는 Vue 인스턴스를 가리키며 호출됩니다. Vue 세계에서 “컨트롤러”의 컨셉이 어디에 있는지 궁금할 수 있습니다. 답은 컨트롤러가 없습니다. 컴포넌트의 사용자 지정 로직은 이러한 라이프사이클 훅으로 분할됩니다.

options 속성이나 콜백에 created: () => console.log(this.a) 이나 vm.$watch(‘a’, newValue => this.myMethod()) 와 같은 화살표 함수 사용을 지양하기 바랍니다. 화살표 함수들은 부모 컨텍스트에 바인딩되기 때문에, this 컨텍스트가 호출하는 Vue 인스턴스에서 사용할 경우 Uncaught TypeError: Cannot read property of undefined 또는 Uncaught TypeError: this.myMethod is not a function와 같은 오류가 발생하게 됩니다.