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

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

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

相關推薦