Vue 采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來(lái)實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式，通過(guò)Object.defineProperty來(lái)劫持?jǐn)?shù)據(jù)的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，訂閱者收到消息后進(jìn)行相應(yīng)的處理。

成都創(chuàng)新互聯(lián)公司致力于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì),成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過(guò)標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。 選擇成都創(chuàng)新互聯(lián)公司，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

要實(shí)現(xiàn)mvvm的雙向綁定，就必須要實(shí)現(xiàn)以下幾點(diǎn)：

1. Compile—指令解析系統(tǒng)，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)

   
   

2. Observer—數(shù)據(jù)監(jiān)聽(tīng)系統(tǒng)，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng)，如有變動(dòng)可拿到最新值并通知訂閱者

3. Dep+Watcher—發(fā)布訂閱模型，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖。

   Dep是發(fā)布訂閱者模型中的發(fā)布者：get數(shù)據(jù)的時(shí)候，收集訂閱者，觸發(fā)Watcher的依賴收集；set數(shù)據(jù)時(shí)發(fā)布更新，通知Watcher 。一個(gè)Dep實(shí)例對(duì)應(yīng)一個(gè)對(duì)象屬性或一個(gè)被觀察的對(duì)象，用來(lái)收集訂閱者和在數(shù)據(jù)改變時(shí)，發(fā)布更新。

   Watcher是發(fā)布訂閱者模型中的訂閱者：訂閱的數(shù)據(jù)改變時(shí)執(zhí)行相應(yīng)的回調(diào)函數(shù)（更新視圖或表達(dá)式的值）。一個(gè)Watcher可以更新視圖，如html模板中用到的{{test}}，也可以執(zhí)行一個(gè)$watch監(jiān)督的表達(dá)式的回調(diào)函數(shù)（Vue實(shí)例中的watch項(xiàng)底層是調(diào)用的$watch實(shí)現(xiàn)的）,還可以更新一個(gè)計(jì)算屬性（即Vue實(shí)例中的computed項(xiàng)）。

mvvm入口函數(shù)，整合以上三者，具體如圖所示：

compire可以參看《雙向綁定的實(shí)現(xiàn)原理》，這里不做過(guò)多解讀。

Observer,Dep和Watcher類的實(shí)現(xiàn)及原理，推薦閱讀《Vue源碼解讀一：Vue數(shù)據(jù)響應(yīng)式原理》，一般開(kāi)發(fā)者需要關(guān)注：

收集依賴指的是誰(shuí)收集依賴，依賴又是指的什么？

Watcher，作用是分割表達(dá)式，收集依賴并且在值變化的時(shí)候調(diào)用回調(diào)函數(shù)。

我們上面說(shuō)過(guò)一個(gè)Dep對(duì)應(yīng)著一個(gè)數(shù)據(jù)（這個(gè)數(shù)據(jù)可能是：對(duì)象的屬性、一個(gè)對(duì)象、一個(gè)數(shù)組）;一個(gè)Watcher對(duì)應(yīng)可以是一個(gè)模板也可以是一個(gè)$watch對(duì)應(yīng)的表達(dá)式、函數(shù)等，無(wú)論那種情況，他們都依賴于data里面的數(shù)據(jù)，所以這里說(shuō)的依賴其實(shí)就是模板或表達(dá)式所依賴的數(shù)據(jù)，對(duì)應(yīng)著相關(guān)數(shù)據(jù)的Dep。

Watcher的四個(gè)使用場(chǎng)景

• 第一種：觀察模板中的數(shù)據(jù)

• 第二種：觀察創(chuàng)建Vue實(shí)例時(shí)watch選項(xiàng)里的數(shù)據(jù)

• 第三種：觀察創(chuàng)建Vue實(shí)例時(shí)computed選項(xiàng)里的數(shù)據(jù)所依賴的數(shù)據(jù)

• 第四種：調(diào)用$watch api觀察的數(shù)據(jù)或表達(dá)式

Watcher只有在這四種場(chǎng)景中，Watcher才會(huì)收集依賴，更新模板或表達(dá)式，否則，數(shù)據(jù)改變后，無(wú)法通知依賴這個(gè)數(shù)據(jù)的模板或表達(dá)式：

所以在解決數(shù)據(jù)改變，模板或表達(dá)式?jīng)]有改變的問(wèn)題時(shí)，可以這么做：

首先仔細(xì)看一看數(shù)據(jù)是否在上述四種應(yīng)用場(chǎng)景中，以便確認(rèn)數(shù)據(jù)已經(jīng)收集依賴；其次查看改變數(shù)據(jù)的方式，確定這種方式會(huì)使數(shù)據(jù)的改變被攔截(關(guān)于這一點(diǎn)，上面Obsever相關(guān)內(nèi)容中說(shuō)的比較多)。

對(duì)于Observer需要注意的是：

getter/setter方法攔截?cái)?shù)據(jù)的不足

1. 當(dāng)對(duì)象增刪的時(shí)候，是監(jiān)控不到的。比如：data={a:"a"},這個(gè)時(shí)候如果我們?cè)O(shè)置data.test="test",這個(gè)時(shí)候是監(jiān)控不到的。因?yàn)樵趏bserve data的時(shí)候，會(huì)遍歷已有的每個(gè)屬性（比如a），添加getter/setter，而后面設(shè)置的test屬性并沒(méi)有機(jī)會(huì)設(shè)置getter/setter，所以檢測(cè)不到變化。同樣的，刪除對(duì)象屬性的時(shí)候，getter/setter會(huì)跟著屬性一起被刪除掉，攔截不到變化。

   vm.$set/Vue.set和vm.$delete/Vue.delete這樣的api來(lái)解決這個(gè)問(wèn)題

   
   

2. getter/setter是針對(duì)對(duì)象的對(duì)于數(shù)組的修改(push(),pop(),shift(),unshift(),splice(),sort(),reverse())等方法，arr發(fā)生了改變，此時(shí)是需要更新視圖的，但是arr的getter/setter攔截不到變化（只有在賦值的時(shí)候才會(huì)調(diào)用setter，比如：arr=[6,7,8]）。

   對(duì)于這種情況，vue通過(guò)改寫(xiě)Array的默認(rèn)方法，在調(diào)用這些方法的時(shí)候發(fā)布更新消息。一般無(wú)需關(guān)注，但是對(duì)于如下兩種情況：

1. 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue

2. 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength

   
   

需要vm.$set/Vue.set和vm.items.splice(newLength)解決，具體參看官方說(shuō)明

3. 每次給數(shù)據(jù)設(shè)置值得時(shí)候，都會(huì)調(diào)用setter函數(shù)，這個(gè)時(shí)候就會(huì)發(fā)布屬性更新消息，即使數(shù)據(jù)的值沒(méi)有變。從性能方便考慮我們肯定希望值沒(méi)有變化的時(shí)候，不更新模板。（像Angular這樣把批量操作延時(shí)到一次更新,一次做完所有數(shù)據(jù)變更，然后整體應(yīng)用到界面上)

整體感知virtual DOM

virtual DOM分為三個(gè)步驟：

1.createElement(): 用 JavaScript對(duì)象(虛擬樹(shù)) 描述 真實(shí)DOM對(duì)象(真實(shí)樹(shù))

2.diff(oldNode, newNode) : 對(duì)比新舊兩個(gè)虛擬樹(shù)的區(qū)別，收集差異

3.patch() : 將差異應(yīng)用到真實(shí)DOM樹(shù)

有的時(shí)候 第二步 可能與 第三步 合并成一步(Vue 中的patch就是這樣)

Vue的實(shí)現(xiàn)原理總結(jié)

1. 首先，在實(shí)例化的過(guò)程中，把一個(gè)普通 JavaScript 對(duì)象傳給 Vue 實(shí)例的 data選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。

2. Dep 是一個(gè)依賴收集器。data 下的每一個(gè)屬性都有一個(gè)唯一的 Dep 對(duì)象，在 get 中收集僅針對(duì)該屬性的依賴，然后在 set 方法中觸發(fā)所有收集的依賴。

3. 在Watcher中對(duì)表達(dá)式求值，從而觸發(fā)數(shù)據(jù)的get。在求值之前將當(dāng)前Watch實(shí)例設(shè)置到全局，使用pushTarget(this)方法。

4. 在get()中收集依賴，this.subs.push(sub),set的時(shí)候觸發(fā)回調(diào)Dep.notify()。

5. Compile中首先將template或el編譯成render函數(shù)，render函數(shù)返回一個(gè)虛擬DOM對(duì)象（將模板轉(zhuǎn)為 render 函數(shù)的時(shí)候，實(shí)際是先生成的抽象語(yǔ)法樹(shù)（AST），再將抽象語(yǔ)法樹(shù)轉(zhuǎn)成的 render 函數(shù)）

6. 當(dāng) vm._render 執(zhí)行的時(shí)候，所依賴的變量就會(huì)被求值，并被收集為依賴。按照Vue中 watcher.js 的邏輯，當(dāng)依賴的變量有變化時(shí)不僅僅回調(diào)函數(shù)被執(zhí)行，實(shí)際上還要重新求值，即還要執(zhí)行一遍

7. 如果還沒(méi)有 prevVnode 說(shuō)明是首次渲染，直接創(chuàng)建真實(shí)DOM。如果已經(jīng)有了 prevVnode 說(shuō)明不是首次渲染，那么就采用 patch 算法進(jìn)行必要的DOM操作。這就是Vue更新DOM的邏輯。

最后，安利下：《Vue.js 技術(shù)揭秘》

參考文章

梳理Vue2.0雙向綁定的實(shí)現(xiàn)原理

文自《梳理vue雙向綁定的實(shí)現(xiàn)原理 - vue入坑總結(jié) - 周陸軍的個(gè)人網(wǎng)站》，如有不妥之前，請(qǐng)?jiān)凑玖粞愿嬷?/p>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：梳理vue雙向綁定的實(shí)現(xiàn)原理-創(chuàng)新互聯(lián)
文章源于：http://aaarwkj.com/article48/gdehp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站排名、品牌網(wǎng)站制作、微信公眾號(hào)、用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)