vue 深度響應初步了解（檢測data對象數據變化）

當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，並使用Object.defineProperty把這些屬性全部轉為 getter/setter

受現代 JavaScript 的限制 (而且 Object.observe 也已經被廢棄)，Vue 不能檢測到對象屬性的添加或刪除。

由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上:

eg:

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是響應的

vm.b = 2
// `vm.b` 是非響應的

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

您還可以使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名：

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

有時你想向一個已有對象添加多個屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是，這樣添加到對象上的新屬性不會觸發更新。在這種情況下可以創建一個新的對象，讓它包含原對象的屬性和新的屬性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

 

官網鏈接：https://cn.vuejs.org/v2/guide/reactivity.html