起因:自己也要去增加长连接看到了如下代码
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的诞生,就开始筹备的,因为缺点着实明显,函数式编程逐渐变为主流