Vue屬性與方法

每一個 Vue 實例都會代理其 data 對象裏全部的屬性：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 設置屬性也會影響到原始數據
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

注意只有這些被代理的屬性是響應的。若是在實例建立以後添加新的屬性到實例上，它不會觸發視圖更新。咱們將在後面詳細討論響應系統。

除了 data 屬性， Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區分。例如：

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`  改變後調用
})

注意，不要在實例屬性或者回調函數中（如  vm.$watch('a', newVal => this.myMethod()) ）使用 箭頭函數 。由於箭頭函數綁定父級上下文，因此  this  不會像預想的同樣是 Vue 實例，而是  this.myMethod  未被定義。