vue數據響應式的一些注意點

有關對象屬性值不觸發視圖更新的狀況：

Vue 不能檢測到對象屬性的添加或刪除，因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

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

 

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

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

方法二：建立一個新的對象，讓它包含原對象的屬性和新的屬性

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

有關數組數組值改變不觸發視圖更新的狀況：

1. 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

 

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

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

方法二：使用數組原型鏈上的方法對數據進行修改

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)