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

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

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

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

簡單理解：

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

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

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

重要名詞：

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

詳細(xì)分析：

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

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

因為訂閱者是有很多的，所有需要一個消息訂閱器depend來專門收集這些訂閱者，然后在監(jiān)聽器和訂閱者之間進(jìn)行統(tǒng)一管理。

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

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

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

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

因為object.defineProperty只能劫持對象屬性，從而需要對每個對象的每個屬性進(jìn)行遍歷。vue2.0里是通過遞歸+遍歷data對象來實現(xiàn)對數(shù)據(jù)的監(jiān)控的，如果屬性值是對象的話，還需要深度遍歷。

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

• get 獲取某個key值 （接收2個參數(shù)，目標(biāo)值和目標(biāo)值key值）
• set 設(shè)置某個key值 （目標(biāo)值、目標(biāo)的key值、要改變的值、改變前的原始值）
• apply 使用in 操作符判斷某個key是否存在
• deleteProperty 刪除一個property
• defineProperty 定義一個新的property

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論