快捷導(dǎo)航

vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點(diǎn)

更新時(shí)間：2022年12月05日 08:47:34 作者：HELLO_小仙女~

這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

受疫情影響，今年各行業(yè)不景氣，各崗位的跳槽形勢(shì)也不是很高。所以趁此機(jī)會(huì)好好蓄力，復(fù)習(xí)面試題吧?，F(xiàn)在中高級(jí)前端面試時(shí)都會(huì)被面試官問(wèn)道原理性的知識(shí)。有些人就是實(shí)踐很好，但就是理論知識(shí)不行。不過(guò)要想拿高薪，理論和實(shí)踐還是要雙結(jié)合的。

Vue數(shù)據(jù)雙向綁定原理

在這里是需要區(qū)分vue2和vue3的，它們底層是不同的。

（一）Vue2雙向數(shù)據(jù)綁定原理

簡(jiǎn)單理解：

vue2數(shù)據(jù)雙向綁定是由數(shù)據(jù)劫持結(jié)合發(fā)布-訂閱的模式實(shí)現(xiàn)的，通過(guò)object.defineProperty()來(lái)劫持對(duì)象屬性的getter和setter操作，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)響應(yīng)的監(jiān)聽回調(diào)。

通過(guò)object.defineProperty()這個(gè)方法接收3個(gè)參數(shù)，一個(gè)是定義屬性的對(duì)象，第二個(gè)是要定義或者修改屬性名，第三個(gè)是將被定義或者修改的屬性描述符。

object.defineProperty(obj, name,{
? ? get:function resultGetter() {
? ? ? ??
? ? },
? ? set:function resultSetter() {
? ? ? ??
? ? }
})

重要名詞：

observer：數(shù)據(jù)監(jiān)聽器，監(jiān)聽數(shù)據(jù)對(duì)象進(jìn)行遍歷，包括子屬性對(duì)象的屬性都加上getter和setter。
compile：解析模板指令，將模板中的遍歷替換成數(shù)據(jù)，然后初始化渲染頁(yè)面視圖，并將每個(gè)指令對(duì)應(yīng)節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)又變化，收到通知，更新視圖。
watcher：訂閱者是observer和compile之間的通信橋梁，在自身實(shí)例化時(shí)往消息訂閱器dep里添加自己，自身必須有個(gè)updata()方法，待屬性變動(dòng)dep.notice()通知時(shí)，能調(diào)用自身的updata()方法，并觸發(fā)compiler中綁定的回調(diào)。
depend：消息訂閱器，當(dāng)有多個(gè)訂閱者的時(shí)候，需要有一個(gè)統(tǒng)一維護(hù)者。depend用來(lái)收集訂閱者，內(nèi)部維護(hù)了一個(gè)數(shù)組。

詳細(xì)分析：

我們已經(jīng)知道實(shí)現(xiàn)雙向數(shù)據(jù)綁定，首先要對(duì)數(shù)據(jù)進(jìn)行劫持監(jiān)聽，所以我們需要設(shè)置一個(gè)監(jiān)聽器observer，用來(lái)監(jiān)聽所有屬性。

每個(gè)屬性都會(huì)有一個(gè)訂閱者watcher，如果一旦屬性發(fā)生變化，就需要告訴訂閱者watcher看是否需要更新。

因?yàn)橛嗛喺呤怯泻芏嗟?，所有需要一個(gè)消息訂閱器depend來(lái)專門收集這些訂閱者，然后在監(jiān)聽器和訂閱者之間進(jìn)行統(tǒng)一管理。

接著還需要一個(gè)指令解析器compile,對(duì)每個(gè)節(jié)點(diǎn)元素進(jìn)行掃描和解析，將相關(guān)指令對(duì)應(yīng)初始化成一個(gè)訂閱者，并替換模板數(shù)據(jù)或者綁定響應(yīng)的函數(shù)，從而更新視圖。

（一）Vue3雙向數(shù)據(jù)綁定原理

面試中面試官也會(huì)問(wèn)另外一個(gè)問(wèn)題：Vue響應(yīng)式原理中object.defineProperty缺陷？為什么在Vue3.0采用了proxy，拋棄了object.defineProperty? 它們的回答是一樣的。

因?yàn)関ue2.0 object.defineProperty只能劫持對(duì)象屬性，無(wú)法監(jiān)控?cái)?shù)組下標(biāo)的變化，導(dǎo)致通過(guò)數(shù)據(jù)下標(biāo)添加的元素不能實(shí)時(shí)響應(yīng)的弊端。為了解決這個(gè)問(wèn)題，經(jīng)vue內(nèi)部處理后，可以使用push()、pop() 、shift()、unshift()、splice()、sort()、reverse()進(jìn)行hack處理,所以其他數(shù)組屬性也是監(jiān)測(cè)不到，具有一定的局限性。

因?yàn)閛bject.defineProperty只能劫持對(duì)象屬性，從而需要對(duì)每個(gè)對(duì)象的每個(gè)屬性進(jìn)行遍歷。vue2.0里是通過(guò)遞歸+遍歷data對(duì)象來(lái)實(shí)現(xiàn)對(duì)數(shù)據(jù)的監(jiān)控的，如果屬性值是對(duì)象的話，還需要深度遍歷。

而Vue3.0中的proxy不僅可以代理對(duì)象，還可以代理數(shù)組，也可以代理動(dòng)態(tài)添加的屬性，有13種劫持操作：