Vue的雙向數(shù)據(jù)綁定原理是什么？

2021-10-9    前端達(dá)人

vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過 Object.de?neProperty()來劫持各個屬性的 setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。 具體步驟： 第一步：需要

observe 的數(shù)據(jù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性，都加上 setter 和 getter，這樣的 話，給這個對象的某個值賦值，就會觸發(fā) setter，那么就能監(jiān)聽到了數(shù)據(jù)變化。 第二步：compile 解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對 應(yīng)的節(jié)點綁定更新函數(shù)， 添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖。 第三步：Watcher 訂閱者是

Observer 和 Compile 之間通信的橋梁，主要做的事情是:

1、在自身實例化時往屬 性訂閱器(dep)里面添加自己

2、自身必須有一個 update()方法

3、待屬性變動 dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā) Compile 中綁定的回調(diào)，則功成身退。 第四步：MVVM 作為數(shù)據(jù)綁定的入口， 整合 Observer、Compile 和 Watcher 三者，通過 Observer 來監(jiān)聽自己 的 model 數(shù)據(jù)變化，通過Compile 來解析編譯模板指令，最終利用 Watcher 搭起 Observer 和 Compile 之間的通信 橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input)-> 數(shù)據(jù) model 變更的雙向綁定效果。








藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至：

日歷

鏈接

個人資料

存檔