鍍金池/ 問答/HTML/ Vue 中的 set 和 $set 的原理是什么，是怎么實(shí)現(xiàn)的?

Vue 中的 set 和 $set 的原理是什么，是怎么實(shí)現(xiàn)的?

原理，實(shí)現(xiàn)
原理，實(shí)現(xiàn)
原理，實(shí)現(xiàn)
原理，實(shí)現(xiàn)

回答
編輯回答
貓館

如下圖所示，先進(jìn)行一個(gè)判斷，判斷target不是undefined、null、string、number、symbol、boolean類型的數(shù)據(jù)。

1.如果target是一個(gè)數(shù)組，那么根據(jù)key值及數(shù)組長度更改數(shù)組的長度(取其中較大者)，然后直接使用splice函數(shù)修改數(shù)組，雖然vue沒有監(jiān)聽數(shù)組變化，但是監(jiān)聽了數(shù)組的push,pop,shift,unshift,splice,sort,reverse函數(shù)，所以使用splice也可以達(dá)到更新dom的目的

2.如果target是一個(gè)對(duì)象，且key是對(duì)象已存在的私有屬性，那么直接賦值就可以了，因?yàn)檫@個(gè)key必然是被監(jiān)聽過的

3.如果這個(gè)key目前沒有存在于對(duì)象中，那么會(huì)進(jìn)行賦值并監(jiān)聽。這里省略了ob的判斷，那么ob是什么呢，vue中初始化的數(shù)據(jù)(比如data中的數(shù)據(jù))在頁面初始化的時(shí)候都會(huì)被監(jiān)聽，而被監(jiān)聽的屬性都會(huì)被綁定__ob__屬性，這里就是判斷這個(gè)數(shù)據(jù)有沒有被監(jiān)聽的。如果這個(gè)數(shù)據(jù)沒有被監(jiān)聽，那么就默認(rèn)你不想監(jiān)聽這個(gè)數(shù)據(jù)，所以直接賦值并返回

set

最后，$set就是set

Vue.prototype.$set = set;
2017年6月11日 11:07