vue中數組響應式解決方案

背景

因爲Js的限制，vue不能監測到數組的變更。

Vue 雙向綁定的原理是利用了 Object.defineProperty 重寫了 get / set，以達到當屬性的值發生變化時來更新試圖的；但這有個缺陷，就是若是不是直接修改的屬性，而是調用了變異方法，那麼 Vue 並不知道其值已經發生改變，此時須要手動調用 Vue.set 以通知 Vue。爲了緩解這個問題，Vue 對 Array 的7個方法進行了包裝

var arr = [1,2,3]
arr[2] = 6

arr.length = 7
// [1, 2, 6, empty × 4]
複製代碼

vue中兩種操做方式將不會更新視圖

1. 直接經過索引修改數組，將不會更新視圖
2. 直接改變數組的length將不會更新視圖

解決方案

Vue 是怎麼知道你把一個對象的值改變之後、就能馬上讓頁面上顯示的結果發生變化呢（所謂的雙向綁定）。它是利用了 Object.defineProperty。

但 Object.defineProperty 有缺陷，只能識別出對屬性直接賦值的，即 obj.property = newVal，這種狀況下 Vue 纔會知道有值變化了、該刷新視圖了。

但對變異方法而言，Object.defineProperty 是無效的、沒法得知值在變異方法中變化了。理論上，這種狀況下，應該在代碼中顯示調用 Vue.set 來通知 Vue 有值變化了、該刷新視圖了。

Vue 爲了緩解這一問題，把 Array 的這幾個變異方法作了包裝，無需 Vue.set，Vue 也能夠知道 Array 的值變化了、該刷新視圖了。

vue 提供了數組的7個變異方法

總結

• Vue 包含一組觀察數組的變異方法，因此它們也將會觸發視圖更新
• 也能夠使用vue.$set來修改數組更新視圖
• 不要直接修改數組的length，不要經過索引修改數組，將沒法更新視圖