[가이드] Vue 인스턴스 - 필수요소 | Vue

Vue 인스턴스 생성

모든 Vue 애플리케이션은 Vue 함수를 사용하여 새 Vue 인스턴스 를 만드는 것으로 시작됩니다

var vm = new Vue({
  // options
})

MVVM 패턴 과 엄격하게 관련되지는 않았지만 Vue의 디자인은 일부+ 영감을 받았습니다.  일반적으로 Vue 인스턴스를 참조하기 위해 변수 vm(ViewModel의 줄임말)을 사용하는 경우가 많습니다.

 

Vue 인스턴스를 생성하면 options 객체를 전달합니다.이 가이드의 대부분은 이러한 옵션을 사용하여 원하는 동작을 만드는 방법을 설명합니다. 참고로 API 참조 에서 전체 옵션 목록을 찾아 볼 수도 있습니다 .

 

Vue 애플리케이션은 new Vue로 생성된 루트 Vue 인스턴스로 구성되며, 선택적으로 중첩되고 재사용 가능한 컴포넌트 트리로 구성됩니다. 예를 들어 todo 앱의 컴포넌트 트리는 다음과 같습니다.

 

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

 

 

데이터 및 방법

Vue 인스턴스가 생성되면 data 객체에서 발견된 모든 속성을 Vue의 반응 시스템에 추가합니다. 해당 속성의 값이 변경되면 view가 "react"되어 새 값과 일치하도록 업데이트됩니다.

 

// data 객체
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

이 데이터가 변경되면 뷰가 다시 렌더링됩니다. data의 속성은 인스턴스가 생성 될 때 존재하는 경우에만 반응합니다.

즉, 다음과 같은 새 속성을 추가하면됩니다.

vm.b = 'hi'

그러면 b로 변경해도 뷰 업데이트가 트리거되지 않습니다. 나중에 속성이 필요하지만 속성이 비어 있거나 존재하지 않는 경우 초기 값을 설정해야 합니다. 예를 들어 다음과 같습니다.

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

이에 대한 유일한 예외는 Object.freeze()를 사용하는 것입니다. freeze()는 기존 속성이 변경되는 것을 방지하며, 반응 시스템이 변경 사항을 추적 할 수 없음을 의미합니다.

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- this will no longer update `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는 인스턴스 method
vm.$watch('a', function (newValue, oldValue) {
  // 이 콜백 함수는 vm.a가 바뀌면 호출된다.
})

전체 인스턴스 속성 및 메서드 목록은 API 참조를 참조할 수 있습니다.

 

 

Instance Lifecycle Hooks

각 Vue 인스턴스는 생성 될 때 일련의 초기화 단계를 거칩니다. 예를 들어 데이터 관찰을 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 합니다. 그 과정에서 Lifecycle Hook 라는 함수도 실행하므로 사용자는 특정 단계에서 자신의 코드를 추가할 수 있습니다.

 

예를 들어 created 후크를 사용하여 인스턴스가 생성 된 후 코드를 실행할 수 있습니다.

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

또한 mounted, updated 및 destroyed와 같이 인스턴스 Lifecycle의 여러 단계에서 호출되는 다른 후크도 있습니다. 모든 Lifecycle Hook는 this 컨텍스트에서 해당 후크를 호출하는 Vue 인스턴스를 가리키며 호출됩니다.

 

created: () => console.log(this.a) 또는 vm.$watch('a', newValue => this.myMethod()) 과 같은 옵션 속성이나 콜백에는 화살표 기능을 사용하지 않습니다. 화살표 함수에는 this가 없기 때문에 this는 다른 변수로 처리되고 발견 될 때까지 상위 범위를 통해 어휘 적으로 조회되어 종종 Uncaught TypeError: Cannot read property of undefined 또는 Uncaught TypeError: this.myMethod is not a function. 와 같은 오류가 발생합니다

 

 

Lifecycle Diagram