在平時的業務開發中,相信在座的各位沒少用過元件通訊。然而,對於一些新手/業務熟手來說,不懂技術原理往往知其然而不知其所以然,用得一臉懵逼。看完本文可以幫助你了解?示例**:vue
元件的通訊方式及原理,從而進一步加深對vue
的理解,遠離cv
工程師的行列。
// 父元件
@test="test"/>
// 子元件
我們可以看到,父子元件的test
方法中各打了乙個debugger
。
執行程式,進入第乙個斷點
vue.prototype.$emit = function (event)
} return vm
};
看完上面的**我們知道,vm._events[event]
拿到了乙個方法,然後呼叫invokewitherrorhandling
。當然,vm._events[event]
的方法應該是從template
上拿到的,接下來我們可以帶著這幾個疑問繼續往下看:
vm._events
是什麼時候賦值的?
在子元件的test
方法中打下乙個斷點,選中呼叫堆疊中的最後乙個以後可以看到add$1
函式,在這裡再下乙個斷點,重新重新整理頁面以後斷點停在了add$1
這個函式上,同時呼叫堆疊列表重新整理,大概有這些:
試探性的點進updatelisteners
以後,我們看到:
function updatelisteners (
on,oldon,
add,
remove$$1,
createoncehandler,
vm) else if (isundef(old))
if (istrue(event.once))
// 斷點沒打在這裡之前,event.name一直是「click」
add(event.name, cur, event.capture, event.passive, event.params);
} else if (cur !== old)
} for (name in oldon)
}}
function add (event, fn)
顯然target
是全域性變數,但是這裡先不深究。再次步進之後可以看到斷點停在這裡:
vue.prototype.$on = function (event, fn)
} else
}return vm
};
可見父子元件通訊過程中,儘管$on
對開發者不可見,但是最終還是要走$on
函式,這裡感覺跟使用eventbus
大同小異。
至此,剛才提出的第乙個疑問已經解決:)
invokewitherrorhandling
方法是怎麼執行的?
在一開始的基礎上,直接步進invokewitherrorhandling
方法:
function invokewitherrorhandling (
handler,
context,
args,
vm,info
) );
}} catch (e)
return res
}
最後重新梳理下父子元件通訊的實現邏輯:
頁面初始化時,vue
呼叫updatelisteners
函式(當然,在那之前會生成虛擬dom
,也就是vnode
,
這裡暫不深究),在函式裡面呼叫createfninvoker
方法,給模板上的方法再套一層呼叫器(invoker)
呼叫target.$on
方法
遞迴處理event
為陣列的情況
給vm._events[event]
賦值
判斷是否有引數,然後分情況呼叫
處理非同步函式的情況
⚠️注意:由於vue
會在方法上再封裝一層呼叫器(invoker
),所以在在呼叫堆疊這裡往往會出現兩個invokewitherrorhandling
方法
根據除錯工具看Vue原始碼之元件通訊(一)
在平時的業務開發中,相信在座的各位沒少用過元件通訊。然而,對於一些新手 業務熟手來說,不懂技術原理往往知其然而不知其所以然,用得一臉懵逼。看完本文可以幫助你了解vue元件的通訊方式及原理,從而進一步加深對vue的理解,遠離cv工程師的行列。示例 父元件 alt vue logo src assets...
根據除錯工具看Vue原始碼之元件通訊(一)
在平時的業務開發中,相信在座的各位沒少用過元件通訊。然而,對於一些新手 業務熟手來說,不懂技術原理往往知其然而不知其所以然,用得一臉懵逼。看完本文可以幫助你了解vue元件的通訊方式及原理,從而進一步加深對vue的理解,遠離cv工程師的行列。示例 父元件 test test 子元件 我們可以看到,父子...
根據除錯工具看Vue原始碼之元件通訊(一)
在平時的業務開發中,相信在座的各位沒少用過元件通訊。然而,對於一些新手 業務熟手來說,不懂技術原理往往知其然而不知其所以然,用得一臉懵逼。看完本文可以幫助你了解vue元件的通訊方式及原理,從而進一步加深對vue的理解,遠離cv工程師的行列。示例 父元件 test test 子元件 我們可以看到,父子...