原理,實現原理,實現原理,實現原理,實現
Vue 中的 set 和 $set 的原理是什么,是怎么實現的?
ibeautiful
2018-08-26 11:22:53
TA貢獻1804條經驗 獲得超8個贊
如下圖所示,先進行一個判斷,判斷target不是undefined、null、string、number、symbol、boolean類型的數據。
1.如果target是一個數組,那么根據key值及數組長度更改數組的長度(取其中較大者),然后直接使用splice函數修改數組,雖然vue沒有監聽數組變化,但是監聽了數組的push,pop,shift,unshift,splice,sort,reverse
函數,所以使用splice也可以達到更新dom的目的
2.如果target是一個對象,且key是對象已存在的私有屬性,那么直接賦值就可以了,因為這個key必然是被監聽過的
3.如果這個key目前沒有存在于對象中,那么會進行賦值并監聽。這里省略了ob的判斷,那么ob是什么呢,vue中初始化的數據(比如data中的數據)在頁面初始化的時候都會被監聽,而被監聽的屬性都會被綁定__ob__屬性,這里就是判斷這個數據有沒有被監聽的。如果這個數據沒有被監聽,那么就默認你不想監聽這個數據,所以直接賦值并返回
最后,$set就是set
Vue.prototype.$set = set;
舉報