this.$once(‘hook:beforeDestory‘,())，销毁定时器

起因：自己也要去增加长连接看到了如下代码
vue版本：vue2

created() {
    
    
   // 长连接断开监听
    const websocketListener = status=>{
    
    
      this.websocketStatus = status;
    };
    eventBus.$on("websocketStatusChange", websocketListener);
    // 组件销毁解绑监听
    this.$once('hook:beforeDestroy', () => {
    
    
      eventBus.$off("websocketStatusChange", websocketListener);
    });
 }

自己也写过很多监听和销毁，但是都是使用如下的方式写的：data中定一个定时器的唯一值，当定时器开启时，就赋给这个唯一值，然后在destroyed中进行销毁。

 destroyed() {
    
    
    clearInterval(this.remote.timer);
    clearInterval(this.log.timer);
  },

这或许就是高手和低手的代码水平吧，高手用的api也常常不拘一格，低手一把梭从头到尾。弊端，不容易维护，上下文不断地滚动，很容易就会忘了清理这个定时器。

   // 这样是不是就不会忘记清理定时器了
    getTime() {
    
    
      // 开启定时器
      const timer = setInterval(this.handleGetServerTime, 2 * 60 * 1000) 
      this.$once('hook:beforeDestroy', () => {
    
    
        clearInterval(timer)
      })
    }

可以在任何方法中调用这个方法销毁想要销毁的方法，而不用刻意去生命周期函数beforeDestroy中销毁：this.$once(‘hook:beforeDestory’,()=>{}) $once是个固定写法 hook代表勾子函数

由此看来，其实vue3的诞生伴随着vue2的诞生，就开始筹备的，因为缺点着实明显，函数式编程逐渐变为主流