下載本文檔
版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
第通過圖帶你深入了解vue的響應式原理依賴收集流程圖：
如何看懂這個依賴收集流程？關鍵在watcher代碼中：
get(){
pushTarget(this)
letvalue
constvm=this.vm
try{
value=this.getter.call(vm,vm)
}catch(e){
//省略
}finally{
if(this.deep){
traverse(value)
popTarget()
this.cleanupDeps()
returnvalue
}
調用的這個this.getter有兩種，一種是key值的getter方法，還有一種是expOrFn，比如mounted中傳入的updateComponent。
如何防止重復收集
我們不妨想想什么才算是重復收集了？
筆者想到一種情況：就是dep數組中，出現了多個一樣的watcher。
比如renderWatch就容易被重復收集，因為我們在html模版中，會重復使用data中的某個變量。那他是如何去重的呢？
1、只有watch在執行get時，觸發的取數操作，才會被收集
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get:functionreactiveGetter(){
constvalue=gettergetter.call(obj):val
if(Dep.target){
dep.depend()
//...
returnvalue
set:functionreactiveSetter(newVal){
//...
dep.notify()
})
當只有Dep.target這個存在的時候才進行依賴收集。Dep.target這個值只有在watcher執行get方法的時候才會存在。
2、在dep.depend的時候會判斷watch的id
depend(){
if(Dep.target){
Dep.target.addDep(this)
addDep(dep:Dep){
constid=dep.id
if(!this.newDepIds.has(id)){
this.newDepIds.add(id)
this.newDeps.push(dep)
if(!this.depIds.has(id)){
dep.addSub(this)
}
我們會發現，在depend過程中，會有一個newDepIds去記錄已經存入的dep的id，當一個watcher已經被該dep存過時，便不再會進行依賴收集操作。
派發更新過程
收集流程講完了，不妨在聽聽更新流程。
訂閱更新的流程
老例子
divid="app"
{{message}}
{{message1}}
inputtype="text"v
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
評論
0/150
提交評論