Vue Data와 Methods

Data

• Vue 인스턴스가 생성될 때 data 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가됨
• 각 속성 값이 변경될 때 뷰가 반응하여 새로운 값과 일치하도록 업데이트됨
• data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형

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

// Vue 인트턴스에 데이터 객체 추가
var vm = new Vue({
  data: data
})

// 인스턴스에 있는 속성은 원본 데이터에 있는 값을 반환
vm.a				// output : 1
vm.$data === data	// output : true

// 인스턴스의 속성 값을 변경하면 원본 데이터에도 영향을 미침
vm.a = 2
data.a		// ouput : 2

//	반대도 마찬가지
data.a = 3
vm.a		// ouput : 3

사용법

보통 Vue component 파일 내에서 data를 선언하고 초기화한다.

data : {
  message : '',
  todos : [],
  seen : false
}

기존 속성이 변격되는 것을 막아 반응형 시스템이 추적할 수 없도록 Object.freeze()를 사용할 수 있다.

var obj = {
  foo: bar
}

Object.freeze(obj)	// 값이 변경되지 않음

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

Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드 제공한다.
다른 사용자 정의 속성과 구분하기 위해 인스턴스에 $ 접두어를 붙인다.

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // output : true
vm.$el === document.getElementById('example') // output : true

// $watch는 인스턴스 메소드
vm.$watch('a', function (newValue, oldValue) {
  // `vm.a`가 변경되면 호출
})