根据调试工具看Vue源码之组件通信（一）

jiezi

6 年前

根据调试工具看 Vue 源码之组件通信（一）## 根据调试工具看 Vue 源码之组件通信（一）
在平时的业务开发中，相信在座的各位没少用过组件通信。然而，对于一些新手 / 业务熟手来说，不懂技术原理往往知其然而不知其所以然，用得一脸懵逼。看完本文可以帮助你了解 Vue 组件的通信方式及原理，从而进一步加深对 Vue 的理解，远离 CV 工程师的行列。

Vue 常用的组件通信方式

通过 $emit 在子组件传参给父组件，同时触发对应的父组件函数，以此达到父子组件通信的目的
通过 eventbus 的 $emit 和 $on 方法传递数据，以此实现父子组件 / 兄弟组件之间的通信
通过 Vuex 将页面数据划分模块，更好更方便的管理数据

父子组件通信原理
???? 示例代码：
// 父组件
<template>
<div id=”app”>
<img alt=”Vue logo” src=”./assets/logo.png”>
<HelloWorld
msg=”Welcome to Your Vue.js App”
@test=”test”/>
</div>
</template>

export default {
name: ‘app’,
methods: {
test (param) {
debugger
console.log(‘param–>’, param);
}
},
components: {
HelloWorld
}
}
</script>

// 子组件
<template>
<div class=”wrapper”>
<button @click=”test”> 按钮 </button>
</div>
</template>

vm._events 是什么时候赋值的？

invokeWithErrorHandling 方法是怎么执行的？

vm._events 是什么时候赋值的？
在子组件的 test 方法中打下一个断点，选中调用堆栈中的最后一个以后可以看到 add$1 函数，在这里再下一个断点，重新刷新页面以后断点停在了 add$1 这个函数上，同时调用堆栈列表刷新，大概有这些：

add$1
updateListeners
updateDomListeners
invokeCreateHooks
createElm
…

试探性的点进 updateListeners 以后，我们看到：
function updateListeners (
on,
oldOn,
add,
remove$$1,
createOnceHandler,
vm
) {
var name, def$$1, cur, old, event;
// 看到这里初步猜测会遍历所有的方法
// 在 chrome 的断点下可以看到一个 click 属性，这里不知道为什么没有 test 方法
for (name in on) {
def$$1 = cur = on[name];
old = oldOn[name];
event = normalizeEvent(name);
// 判断当前的方法的调用器（invoker）是否是 undefined，在开发环境下则会有报错提示
if (isUndef(cur)) {
process.env.NODE_ENV !== ‘production’ && warn(
“Invalid handler for event \”” + (event.name) + “\”: got ” + String(cur),
vm
);
} else if (isUndef(old)) {// 判断之前是否已存在
if (isUndef(cur.fns)) {// 判断实际上调用的函数是否是 undefined
cur = on[name] = createFnInvoker(cur, vm);
}
if (isTrue(event.once)) {// 可能是挂载在一次性节点上，这里也做出判断
cur = on[name] = createOnceHandler(event.name, cur, event.capture);
}
// 断点没打在这里之前，event.name 一直是“click”
add(event.name, cur, event.capture, event.passive, event.params);
} else if (cur !== old) {
old.fns = cur;
on[name] = old;
}
}
for (name in oldOn) {
if (isUndef(on[name])) {
event = normalizeEvent(name);
remove$$1(event.name, oldOn[name], event.capture);
}
}
}
整理完上面这个函数的逻辑以后，将断点打在 add 上，刷新页面后断点停在这里，步进这个函数：
function add (event, fn) {
target.$on(event, fn);
}
显然 target 是全局变量，但是这里先不深究。再次步进之后可以看到断点停在这里：
Vue.prototype.$on = function (event, fn) {
var vm = this;
if (Array.isArray(event)) {
for (var i = 0, l = event.length; i < l; i++) {
vm.$on(event[i], fn);
}
} else {
(vm._events[event] || (vm._events[event] = [])).push(fn);
// optimize hook:event cost by using a boolean flag marked at registration
// instead of a hash lookup
if (hookRE.test(event)) {
vm._hasHookEvent = true;
}
}
return vm
};
可见父子组件通信过程中，尽管 $on 对开发者不可见，但是最终还是要走 $on 函数，这里感觉跟使用 eventbus 大同小异。
至此，刚才提出的第一个疑问已经解决:)

invokeWithErrorHandling 方法是怎么执行的？
在一开始的基础上，直接步进 invokeWithErrorHandling 方法：
function invokeWithErrorHandling (
handler,
context,
args,
vm,
info
) {
var res;
try {
// 判断是否有参数，然后分情况调用
res = args ? handler.apply(context, args) : handler.call(context);
// 处理异步函数的情况
if (res && !res._isVue && isPromise(res)) {
// issue #9511
// reassign to res to avoid catch triggering multiple times when nested calls
res = res.catch(function (e) {return handleError(e, vm, info + ” (Promise/async)”); });
}
} catch (e) {
handleError(e, vm, info);
}
return res
}
最后重新梳理下父子组件通信的实现逻辑：
赋值 vm._events[event]

页面初始化时，Vue 调用 updateListeners 函数 (当然，在那之前会生成虚拟 dom，也就是 vnode，
这里暂不深究 )，在函数里面调用 createFnInvoker 方法，给模板上的方法再套一层调用器（invoker）

调用 target.$on 方法
递归处理 event 为数组的情况
给 vm._events[event] 赋值

invokeWithErrorHandling 方法是怎么执行的？

判断是否有参数，然后分情况调用
处理异步函数的情况

⚠️注意：由于 Vue 会在方法上再封装一层调用器（invoker），所以在在调用堆栈这里往往会出现两个 invokeWithErrorHandling 方法