總所周知,vue的乙個大特色就是實現了雙向資料響應,資料改變,檢視中引用該資料的部分也會自動更新
「資料改變,檢視中引用該資料的部分也會自動更新「,從這句話,我們可以分析出以下幾點:
vue的雙向資料響應也是基於以上思路開發的
2.1資料劫持
利用object.defineproperty深度遍歷每個響應資料,給每個響應資料和其子屬性新增get和set方法.
object.defineproperty的get方法在資料被呼叫時執行.所以get()用於收集依賴,所謂的依賴就是使用當前響應資料的dom
object.defineproperty的set方法在資料修改時被執行.所以set()方法用於通知監聽事件,我的資料更新了defaultreative(data,key,value)
defaultreative(data,key,value),set(newval)
})}
dep是發布訂閱模式的一環,會在下面講解
2.2發布訂閱模式
發布—訂閱模式可以廣泛應用於非同步程式設計中，這是一種替代傳遞**函式的方案.這種模式讓乙個物件不在顯示地呼叫另乙個物件的介面,實現了多個物件松耦合聯絡在一起.
只需要訂閱感興趣的事件發生點,當事件執行時就會通知給所有訂閱者.
乙個簡單的發布-訂閱模式的實現主要是以下三點內容：
在vue中dep就類似發布者,下面是dep的實現
class depadddep(dep)
notify())
}}
我們給每乙個響應資料get()內部新增乙個deps列表,列表內部就是呼叫該響應資料的訂閱者,
我們給每乙個響應資料set()內部新增乙個dep.notify(),這個方法去通知訂閱者呼叫內部的更新函式,更新檢視
defaultreative(data,key,value),set(newval)
})}
watcher
watcher類似訂閱者,他會和dom去做關聯.watcher內部有乙個update方法,用於更新dom節點.
watcher也會跟dep做關聯,在constructor中,呼叫dep.target=this,目的是讓dep指向當前的watcher.響應資料對應的訂閱者不同,每個響應資料收集到對應的依賴就需要指定this,因為在渲染dom的時候,我們會給每個dom節點都初始化乙個watcher例項,this就是這個watcher例項
下面是乙個watcher方法的實現
//監聽資料的變化
class watcher
//在index.js中一旦資料有變動會觸發dep.notify方法，
//nodity會遍歷dep中收集的watcher,呼叫watcher中的update方法,在update方法中執行,
//這裡(compile)傳遞給watcher的方法(updatefn)更新檢視
update()
}
在渲染dom的時候,將dom方法的更新函式傳遞給watcher做**
update(el,vm,exp,type));}
vue在編譯html模版的時候,會給每個dom節點初始化watcher訂閱者,把該節點的更新函式傳遞給watcher類中
vue在初始化時會深度遍歷每乙個響應屬性,給每個響應屬性新增上get和set方法,當html渲染時用到了響應資料就去呼叫get方法得到資料,同時get內部通過依賴收集知道了呼叫的訂閱者都有那些;
在修改響應資料時會呼叫set方法,在方法內部通過dep.notify通知訂閱者,訂閱者去呼叫update更新dom節點
vue雙向資料繫結及其底層原理
什麼式雙向資料繫結 viewmodel對model層進行更新的時候，viewmodel中的binder會自動地把資料更新到view層上去，當使用者操作了view層 例如 表單地輸入 viewmodel也會自動地把資料更新到model層上。這種方式成為 雙向資料通訊 雙向資料通訊的底層原理 vue在建...
Vue雙向資料繫結原理分析
當我們在前端開發中採用mv 的模式時，m model，指的是模型，也就是資料，v view，指的是檢視，也就是頁面展現的部分。通常，我們需要編寫 將從伺服器獲取的資料進行 渲染 展現到檢視上。每當資料有變更時，我們會再次進行渲染，從而更新檢視，使得檢視與資料保持一致。也就是 而另一方面，頁面也會通過...
Vue 雙向資料繫結原理分析
當我們在前端開發中採用mv 的模式時，m model，指的是模型，也就是資料，v view，指的是檢視，也就是頁面展現的部分。通常，我們需要編寫 將從伺服器獲取的資料進行 渲染 展現到檢視上。每當資料有變更時，我們會再次進行渲染，從而更新檢視，使得檢視與資料保持一致。也就是 paste image....