事件总线的一些坑,为什么事件总线会导致内存泄漏(没有$off),为什么会事件总线会多次执行(还是没有$off),为什么会事件总线不执行(没有先生成$on)?

想要进行$bus.$emit() 到$bus.$on(),并且了解为什么会触发多次

需要的知识:父子嵌套生命周期 和bus.$emit,('xx',data) bus.$on('xx',(data)=>{}),bus.$off('xx',data)

 

父子嵌套生命周期

1.开始的时候会先执行父组件中的前三个后 执行子组件的前三个 再去执行父组件的mounted ,

2.销毁的时候会执行父的beforeDestroy 在执行子组件的beforeDestroy =>destroyed 在执行父组件的destroyed

1.开始

2.销毁

$emit和$on没执行的原因

 

根据生命周期可以看的出来:$on先执行 在执行$emit触发事件 (嵌套关系)在生命周期中子组件没有加载$on,就执行$emit方法的话是不会执行的.

 

解决办法:把父组件中的$emit事件放在mounted钩子函数中 等待子组件创建并注册$on事件后再去触发$emit。 只适合嵌套关系 可能出现兄弟关系 也要看情况进行使用

 

 

 

为什么需要$off(防止多次生成子组件的时候,订阅事件进行多次)

1.当点击销毁子组件的时候 子组件还能接收到数据吗？对应的回调函数还能在执行吗？

答案是 会，事件订阅功能是$eventBus对象完成的，与组件无关，当你点击销毁后 再点击创建又会多了一个订阅事件，依次类推每次点击新建后都会多一个订阅事件

造成原因：事件订阅是通过$eventBus对象完成的 与组件无关

后果:如果不移除事件监听 并且会造成内存泄漏

 

通过v-if 销毁和重新创建来看通过数据发现 销毁后并没有对空间进行释放

解决方案： 在子组件销毁后进行取消订阅事件

 

 

对bus取消事件监听后 内存得到了释放

 

过多的使用事件bus而不用off会造成内存泄漏

 

 

总结:

 

1. 任何组件都可以在事件总线中发布事件 this.$bus.$emit('xxx','传递参数')

 

2. 任何组件都可以在事件总线中监听事件 this.$bus.$on('xxx',(接收参数)=>{ 对形参进行操作 })

 

3. main.js注册空的Vue对象, 只负责$on注册事件, $emit触发事件, 一定要确保$on先执行

 

4.$off的格式：

 

$off() 会取消所有的事件订阅；

 

$off('事件名') 会取消指定事件名的；

 

$off('事件名', 回调) 会取消指定事件名的，指定回调