根據除錯工具看Vue原始碼之元件通訊(一)

2021-09-12 18:56:05 字數 2389 閱讀 2460

在平時的業務開發中,相信在座的各位沒少用過元件通訊。然而,對於一些新手/業務熟手來說,不懂技術原理往往知其然而不知其所以然,用得一臉懵逼。看完本文可以幫助你了解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 子元件 我們可以看到,父子...