Vue EventBus踩坑总结

前提: vue 组件懒加载 ()=>import()这种方式引入组件

1. 首次加载不触发，A组件emit,B组件on,当A组件触发事件加载B组件时，因为B组件还未加载，自然this.$root.bus.$emit监听不到B中的事件，也就触发不了。（如果不采用组件懒加载则没问题）

2. 多次监听事件，因每次进入B组件都会on一次事件，这会类似于元素addEventListner一样，建立多次监听，故触发事件时会多次触发事件。

   /* 需要每次销毁组件时取消监听 */
   beforeDestroy: function () {
       this.$root.Bus.$off(['emitName1', 'emitName2'...])
     }
   

3. A中emit,B和C中有相同名字的on,如 'init',当触发A时，组件由B改为C,此时触发的不是C中的init,而是B中的。

   如果非懒加载引入，则会两个init都触发。

个人解决方案：

1. 弃用Bus,当只是一个简单的传值或者不涉及到首次要触发事件时才使用。虽说不采用组件懒加载使用是没问题，但为了程序的优化，还是推荐组件懒加载。

2. A中改变数据，关联Vuex中数据，组件B、C中watch Vuex中数据有无改变，从而触发相应事件。

3. watch这种方式，首次是不触发的。B、C 如要实现首次即可触发，在watch中加参数immdiate: true即可。

   当然还有蠢一点的方法，即mounted中主动触发一次事件。

   // 例 ：
   watch:{
       serachValue:{
           handler:"methodName" // 方法名
           immediate:true // 默认是false
       }
   }
   // 当然也可以这么写
    watch: {
       serachValue: {
         immediate: true,
         handler (newValue,oldValue) { //直接写方法
           this.methodName()
         }
       }
     }
   

4. watch这种方式如若newValue和oldValue相同，则不会触发handler。如若要实现不改变值也要触发事件怎么办。

   /* Vuex中 部分代码 */
   state: {
       isCheck: 0, 
       watchIsCheck: 0, // 监测isCheck是否有被重新赋值,不管newValue是否等于oldValue,isCheck改变时，设值为时间戳用于保持唯一性，用于在组件中监听，从而实现不管之前是否是相同的，一样触发相应事件
     },
     mutations: {
       changeIsCheck (state, val) {
         state.watchIsCheck = new Date().getTime()
         state.isCheck = val
       }
    }
   
   /* 组件中 */
   import {mapStates} from Vuex
   // 此处忽略将mapstates注册的代码
   watch:{
       watchIsCheck(){
           // 此时this.isCheck已经最新改变过的了，不管是否前后一样。
           this.doSomething()
       }
   }
   

总结：总的来说，bus这个东西用来用去感觉不怎么好用。相较于Vuex，灵活性差很多。父子组件传值有自己的方式也用不到它。遇坑时问了一个vue的大牛,推荐我学provide和inject，错略看了下，比较高级的用法，还没有时间去学。