【vue開發問題-解決方法】（七）Vue不能檢測到對象屬性添加或刪除 ，vue不能檢測到數組的變動問題

由於JavaScript的限制，Vue不能檢測對象屬性的添加或刪除。

vue實現數據雙向綁定有這么一個過程：當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，並使用Object.defineProperty() 把這些屬性全部轉為getter/setter。每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。實現數據data變化更新視圖view。

因為若一個對象的屬性沒有在data中聲明，則他就不是響應式的。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，這樣的話這個對象屬性就是響應式的。而執行這個過程必須在data中聲明才會有。

var vm = new Vue({
    data:{
        a:1// vm.a 是響應的

    }
})
vm.b = 2;// vm.b 是非響應的

要解決這個問題需要用Vue.set(object, key, value)或者vm.$set方法(全局 Vue.set 方法的別名)

Vue.set(vm.someObject, 'b', 2);
//或者
this.$set(this.someObject,'b',2);

由於 JavaScript 的限制， Vue 不能檢測以下變動的數組： 
* 當使用索引直接設置一個項時，例如： 

vm.items[indexOfItem] = newValue; 

解決---->
Vue.set(vm.items,indexOfItem,newValue) / vm.items.splice(indexOfItem, 1 , newValue)

 

* 當你修改數組的長度時，例如： 

vm.items.length = newLength;

解決---->
vm.items.splice(newLength)