页面被销毁后，接口仍然被调用；Bus.$off

目录

一、问题

二、原因及解决方法

三、总结

---

一、问题

1.突然发现自己写的页面有点奇葩，虽然两个页面有一致的逻辑，但是另外一个都还没有写逻辑，结果另外一个页面也已经正常渲染 图标及div了。真是奇怪。

二、原因及解决方法

1.如下图所示，从页面A跳转到页面B，本来页面B上的那个图标是不应该显示的，我还没有写渲染逻辑呀！但是它渲染了。控制台打印渲染图标的函数被执行了两次，那只能是页面A执行的呀！

 2.为什么会执行两次呢？难道不应该是一次吗？组件销毁了，还能执行一次？

 3.原因：我使用了Bus.$on('renderDom',()=>{ //渲染图标的逻辑})

   组件被销毁前，Bus.$on竟然又监听到了 renderDom事件，然后执行了渲染图标的函数！！！！！！

4.解决方法：在组件销毁前(onBeforeUnmount生命周期函数） Bus.$off('renderDom',()=>{ //渲染图标的逻辑})，取消监听 renderDom事件即可。

代码如下：

    onBeforeUnmount(()=>{
       Bus.$off('renderDom',()=>{ //渲染图标的逻辑
      })
    })

三、总结

1.使用Bus.$on监听其他组件的事件时，一定要在页面销毁前 Bus.$off取消监听呀。否则，销毁当前页面后还会自动执行一次监听事件，可能会对其他页面的渲染逻辑产生影响，同时也会带来不必要的接口调用，影响页面渲染的性能。

2.发现页面销毁后还有函数被调用，请检查是否有Bus.$on监听，但没有在离开页面前使用 Bus.$off取消监听。

3.当然有时候也可以利用这个特点做一些其他事情，符合业务逻辑即可！！！！！！