[Vue.js] 인스턴스, 속성 그리고 메서드

Vue의 인스턴스와 속성 그리고 메서드에 대해서 포스팅해 보겠습니다!

 

Vue 인스턴스 만들기

---

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

 

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

 

MVVM 패턴과 유사하지만 완벽하게 일치하지는 않습니다. 변수명은 app or vm(ViewModel)을 주로 사용합니다.

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

 

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

 

Vue앱은 new Vue 를 통해 만들어진 root Vue instance로 구서외며 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성됩니다. 예를 들어 Todo 앱의 컴포넌트 트리는 다음과 같습니다.

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

확장된 인스턴스를 만들수는 있으나 대체로 템플릿에서 선언적 사용자 지정 엘리먼트로 작성하는 것이 좋습니다.

지금은 모든 Vue 컴포넌트가 본질적으로 확장된 Vue 인스턴스라는 것을 알아야 합니다.

 

속성과 메소드

---

 

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

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

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

// 같은 객체를 참조하는 것을 확인할 수 있습니다.
vm.a === data.a // => result: true

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

// 원본데이터의 변경은 속성값의 변경에도 영향을 미칩니다.
data.a = 3
vm.a // => 3

데이터가 변경되면 화면은 다시 렌더링됩니다. data에 있는 속성들은 vm이라는 인스턴스가 생성되는 시점에서 만들어진 것들만 반응형이라는 것입니다. 즉, 다음과 같이 새 속성을 추가하면

vm.b = 'hi'

b가 변경되어도 화면이 갱신되지 않습니다. 인스턴스가 생성될때 정의된 속성이 아니기 때문입니다.

이러한 이유로 초기화 값을 지정해 나중에 필요한 속성을 정의할 수 있습니다.

 

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

Object.freeze()를 사용하는 경우만 유일하게 예외로 작용합니다. 이말인 즉, 기존 속성이 변경되는 것을 막아 반응형 시스템이 추적할 수 없다는 것을 의미합니다.

 

<div id="app">
  <p>{{ foo }}</p>
  <!-- obj.foo는 더이상 변하지 않습니다! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

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`가 변경되면 호출 됩니다.
})

https://kr.vuejs.org/v2/api/#search-form

API — Vue.js

위의 자료는 나머지 유용한 API모음입니다.

 

인스턴스 라이프사이클 훅

---

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

 

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

인스턴스 라이프사이클의 여러 단계에서 호출되는 훅은 다양합니다. mounted, updated, destroyed가 있습니다. 

모든 라이프사이클 훅은 this 컨텍스트가 호출하는 Vue 인스턴스를 가리키며 호출됩니다. Vue 세계에서 "controller"의 컨셉이 어디에 있는지 아시나요? Vue는 "controller"가 없습니다. 컴포넌트의 사용자 지정 로직은 라이프사이클 훅으로 분할됩니다.