非兄弟非父子组件bus通讯踩坑记录

FBI Warning：本文是记录本菜鸟学习bus通信的一次记录。如大佬熟练掌握Vue或已对Vue源码有了解，不建议浪费时间阅读。部分文字可能引起感官上的不适，请在男/女朋友的陪同下阅读

1.整体思路

看了官网文档关于bus的用法，遂想写个简单的组件bus通讯demo练手。

• showTime组件监听bus的自定义事件，并对传递的参数做处理
• getTime组件通过bus触发自定义事件

2. 相关代码

上面的思路对应代码如下。为方便直接用vue-cli构建

2.1 showTime.vue

2.2 getTime.vue

2.3 bus.js

import Vue from 'vue'
export default new Vue()

2.4 路由

import Vue from 'vue'
import Router from 'vue-router'
import getTime from '@/components/getTime '
import showTime from '@/components/showTime'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      component: showTime 
    },
    {
      path: '/getTime',
      component: getTime 
    }
  ]
})

3. 出现问题

3.1 操作步骤

• 先进入showTime组件，让bus开始监听自定义的事件
• 然后进入getTime组件，通过点击按钮触发事件
• 理想情况下，再次进入showTime组件，会更新time的值，并更新视图

3.2 问题概述

• showTime组件视图并没有如期更新
• 多次重复以上步骤，第n次进入后点击按钮，会执行n次console.log(data)

4. debug思路

• 通过观察，发现bus的get事件在getTime组件的按钮按下后，在触发bus的get事件时就已经将参数new Date()发送出去了，而非进入showTime组件时。
• 这个现象纠正了我之前对bus通讯一个错误的认识：之前我以为bus是在进入showTime的created钩子时，才会响应get事件并传递参数。事实是，showTime组件只是提供了为 bus 注册事件的时机。一旦注册，在组件层面上 bus 已经跟showTime组件没关系了。
• 3.1的三个操作步骤，实质上发生了以下事情：
  • bus开始监听get事件
  • showTime组件销毁。在getTime组件bus触发get事件，传递参数new Date()。
  • getTime组件销毁，在created钩子，time值初始化为'初始值'（这一步中，get事件传递参数的时机早于getTime组件的created钩子，所以视图不会更新）;同时bus再次监听一个新的get事件（为什么会说再次呢？接下来会解释）
• 关于上文提到的bus再次监听一个新的事件，我们先将showTime组件的created钩子添加调试代码，
  通过观察bus._events的变化来理解

    bus.$on('get', data => { 
      console.log(data)
      this.time= data
    })
    console.log(bus._events)  // 

• bus._events是一个对象。当进入showTime的created钩子，会为bus._events添加一个key为get，value为空数组，并将监听get事件的回调函数添加至这个数组。因此，n次进入showTime组件后，这个数组就会添加n个回调函数。每一次在getTime组件按下按钮，都会执行数组里的每一个回调函数，造成n次切换路由后点击按钮，bus监听自定义函数的代码会被执行n遍

5. 解决方案

• 从上面的分析中可以看出，出现的2个问题都是和组件的created钩子有关。所以可以通过使用keep-alive缓存组件，除了第一次进入showTime组件会触发created生命周期，之后切换路由都不会销毁组件。因此之后进入showTime组件，time都会被更新为传递的参数，也不会往bus._events添加多个自定义事件回调函数
• 但感觉这样似乎有点复杂，如果对于非兄弟非父子组件的Bus通讯有更好的用法，更深的理解，欢迎一起探讨。水平有限，如文章有说错的地方，也欢迎指正。