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

以你之姓@ 2022-03-06 03:22 174阅读 0赞

## 根据调试工具看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>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    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>
    
    <script>
    export default {
      name: 'HelloWorld',
      methods: {
        test () {
          debugger
          this.$emit('test', '666')
        }
      }
    }
    </script>

我们可以看到，父子组件的`test`方法中各打了一个`debugger`。

#### 运行程序，进入第一个断点 ####

Vue.prototype.$emit = function (event) {
      var vm = this;
      ...
      var cbs = vm._events[event];
      if (cbs) {
        cbs = cbs.length > 1 ? toArray(cbs) : cbs;
        var args = toArray(arguments, 1);
        var info = "event handler for \"" + event + "\"";
        for (var i = 0, l = cbs.length; i < l; i++) {
          invokeWithErrorHandling(cbs[i], vm, args, vm, info);
        }
      }
      return vm
    };

看完上面的代码我们知道，`vm._events[event]`拿到了一个方法，然后调用`invokeWithErrorHandling`。当然，`vm._events[event]`的方法应该是从`template`上拿到的，接下来我们可以带着这几个疑问继续往下看：

*  `vm._events`是什么时候赋值的？
 *  `invokeWithErrorHandling`方法是怎么执行的？

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

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

*  `add$1`
 *  `updateListeners`
 *  `updateDomListeners`
 *  `invokeCreateHooks`
 *  `createElm`
 *  ...

试探性的点进`updateListeners`以后，我们看到：

整理完上面这个函数的逻辑以后，将断点打在`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`方法：

最后重新梳理下父子组件通信的实现逻辑：

*  赋值`vm._events[event]`

1.  页面初始化时，`Vue`调用`updateListeners`函数(当然，在那之前会生成虚拟`dom`，也就是`vnode`，

这里暂不深究)，在函数里面调用`createFnInvoker`方法，给模板上的方法再套一层调用器（invoker）

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

*  `invokeWithErrorHandling`方法是怎么执行的？

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

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