2021-10-9 前端達人
vue.js 是采用數據劫持結合發布者-訂閱者模式的方式,通過 Object.de?neProperty()來劫持各個屬性的 setter,getter,在數據變動時發布消息給訂閱者,觸發相應的監聽回調。 具體步驟: 第一步:需要
observe 的數據對象進行遞歸遍歷,包括子屬性對象的屬性,都加上 setter 和 getter,這樣的 話,給這個對象的某個值賦值,就會觸發 setter,那么就能監聽到了數據變化。 第二步:compile 解析模板指令,將模板中的變量替換成數據,然后初始化渲染頁面視圖,并將每個指令對 應的節點綁定更新函數, 添加監聽數據的訂閱者,一旦數據有變動,收到通知,更新視圖。 第三步:Watcher 訂閱者是
Observer 和 Compile 之間通信的橋梁,主要做的事情是:
1、在自身實例化時往屬 性訂閱器(dep)里面添加自己
2、自身必須有一個 update()方法
3、待屬性變動 dep.notice()通知時,能調用自身的update()方法,并觸發 Compile 中綁定的回調,則功成身退。 第四步:MVVM 作為數據綁定的入口, 整合 Observer、Compile 和 Watcher 三者,通過 Observer 來監聽自己 的 model 數據變化,通過Compile 來解析編譯模板指令,最終利用 Watcher 搭起 Observer 和 Compile 之間的通信 橋梁,達到數據變化 -> 視圖更新;視圖交互變化(input)-> 數據 model 變更的雙向綁定效果。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
轉自:csdn
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務