vue響應式原理 (響應式並不等於數據雙向綁定,千萬不要混淆)


vue實現數據雙向綁定主要是:采用數據劫持結合發布者-訂閱者模式的方式,通過 Object.defineProperty() 數據劫持,來劫持各個屬性的setter,getter,在數據更新時發布消息給訂閱者,觸發相應監聽回調。

當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時,Vue 將遍歷它的屬性,用 Object.defineProperty() 將它們轉為 getter/setter。用戶看不到 getter/setter,但是在內部它們讓 Vue 追蹤依賴,在屬性被訪問和修改時通知變化。

vue的數據雙向綁定 將MVVM作為數據綁定的入口,整合Observer,Compile和Watcher三者,通過Observer來監聽自己的model的數據變化,通過Compile來解析編譯模板指令(vue中是用來解析 {{}}),

最終利用watcher搭起observer和Compile之間的通信橋梁,達到數據變化 —>視圖更新;視圖交互變化(input)—>數據model變更雙向綁定效果。

1、Object.defineProperty()  (Observer 監聽model數據變化)

語法: Object.defineProperty(obj, prop, descriptor)
obj:要定義的對象
prop:要定義的對象的屬性
descriptor:要定義或修改的屬性描述符。

 

 

 

 

 

 

2、訂閱-發布者模式 (watcher)

訂閱模式其實就是就是一個隊列,我們把需要執行的函數推進一個數組,在需要用的時候依次去執行這個數組中方法

訂閱就是把函數PUSH到數組,

發布就是便利執行這些函數

 

 

 3、compile 模板編譯

vue模板編譯其實就是把 template 模板編譯成瀏覽器可識別的 HTML 

具體原理參考博文:https://segmentfault.com/a/1190000012922342


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM