學習筆記:vue為什麼不能監聽陣列屬性的變化

newbeehh發表於2018-06-23

首先,我們得明白物件是如何監聽屬性的的變化的,vue的實現方法主要是通過Object.defineProperties方法對註冊的資料進行劫持,並結合觀察者模式,設定它們的setget方法,在get方法中註冊觀察者,然後在set方法中觸發觀察者即可,具體的實現,可以看看這篇文章:Vue.js雙向繫結的實現原理。接下來我們瞭解下陣列。

js中的陣列其實就是一個物件,它的資料結構和物件的鍵值對結構是一模一樣的,但是它模擬了陣列的資料結構進行遍歷,因此可以有序的獲取儲存的資料,比如陣列的a[1]其實就轉換成了a['1']進行資料儲存。遍歷的時候,就得對屬性進行排序,獲取有序的資料。並且陣列物件提供很多與屬性相關的操作,比如spliteslice等方法。詳情可以看看這個:js陣列詳解

既然知道了陣列也是物件,那為什麼不可以監聽屬性的變動呢,如a[1]='a',其實這裡還涉及到一個問題,那就是vue不能監聽動態新增的屬性,這是資料劫持的一個缺陷,動態新增的屬性只能手動呼叫Vue.set方法進行註冊監聽,而陣列要實現屬性監聽的話,就得不斷得呼叫Vue.set方法了,也就說,要想實現陣列的屬性監聽,得我們手動去實現。

而陣列的作用就是不斷的增刪資料,這就得不斷的呼叫set方法,這必然是成本高於回報的事情,所以說陣列可以實現屬性的監聽,但監聽的需求不強和成本太高了,因此對此,陣列只需對其屬性的個數變化進行監聽即可。

而如何監聽呢,無非就是重寫本陣列物件的相關方法。這些方法得是影響陣列本身屬性個數的方法,也叫變異方法,具體的實現可以參考這篇文章:如何監聽陣列的變化



相關文章