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