一. 如何追蹤變化

1. 當(dāng)你把一個普通的 JavaScript 對象傳入 Vue 實例作為 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。

2. 這些 getter/setter 對用戶來說是不可見的，但是在內(nèi)部它們讓 Vue 能夠追蹤依賴，在屬性被訪問和修改時通知變更。

3. 每個組件實例都對應(yīng)一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數(shù)據(jù)屬性記錄為依賴。之后當(dāng)依賴項的 setter 觸發(fā)時，會通知 watcher，從而使它關(guān)聯(lián)的組件重新渲染。

4. 由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的！！

   var app = new Vue({
     data:{
       a:1
     }
   })
   
   // `app.a` 是響應(yīng)式的
   
   vm.b = 2
   // `app.b` 是非響應(yīng)式的
   

二. 怎么解決不在data屬性上的數(shù)據(jù)不是響應(yīng)式？

• !! 可以用Vue.set(object, propertyName, value)方法

  Vue.set(vm.someObject, 'b', 2)
  

• !!用this.$set(object, protertyName, value)方法

  this.$set(this.someObject,'b',2)