[Vue] 뷰 인스턴스 (Vue Instance)

[Vue] 뷰 인스턴스 (Vue Instance)

뷰 인스턴스 생성하기

모든 Vue 앱은 Vue 함수를 새 뷰 인스턴스(Vue Instance)를 만드는 것부터 시작한다.

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

 

위 코드처럼 Vue 인스턴스를 참조하는 변수를 종종 vm (ViewModel 의 약자) 을 사용한다.

 

데이터 (data)

이렇게 뷰 인스턴스가 생성될 때 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

하지만 주의할 점은 data 에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형 이라는 것이다.

 

vm.b = "hi" 와 같이 인스턴스가 생성될 때 없는 것들은 변경되어도 화면에 갱신되지 않는다. 따라서 어떤 속성이 나중에 필요하다는 것을 알고 있으며, 빈 값이거나 존재하지 않은 상태로 시작한다면 초기값을 지정할 필요가 있습니다.

 

여기서 유일한 예외가 Object.freeze() 를 사용하는 경우이다. 이는 기존 속성이 변경되는 것을 막아 반응성 시스템이 추적할 수 없다는 것을 의미한다.

 

메소드 (method)

Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드를 제공합니다. 메소드에서 data 에 있는 속성들을 사용하려면 속성 앞에 this 키워드를 사용하여 접근하여야 한다.

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