一、$off接口概述
在Uniapp开发中，`$off`是一个非常重要的全局方法，用于移除通过`$on`或`once`添加的事件监听器。合理使用`$off`可以有效管理应用中的事件系统，避免内存泄漏和重复触发问题。
二、基本语法
javascript
// 移除所有事件监听器
this.$off()
// 移除指定类型的所有监听器
this.$off('eventName')
// 移除指定类型的特定回调函数
this.$off('eventName', callback)
三、使用场景详解
1. 组件销毁时清理事件
最常见的用法是在组件的生命周期钩子中清理事件：
javascript
export default {
data() {
return {
eventHandler: null
}
},
created() {
this.eventHandler = function(data) {
console.log('收到数据:', data)
}
// $on添加事件监听
this.$on('custom-event', this.eventHandler)
// once只触发一次的事件
this.$once('one-time-event', function() {
console.log('这个只会执行一次')
})
// setTimeout模拟异步操作后触发事件
setTimeout(() => {
this.$emit('custom-event', {msg: 'Hello'})
this.$emit('one-time-event')
// one-time-event会自动被移除了，无需手动调用$off
// custom-event需要手动移除(通常在beforeDestroy中做)
// setTimeout模拟组件销毁前再次触发(不会被执行)
setTimeout(() => {
console.log("尝试再次触发")
this.$emit('custom-event', {msg: '不会被接收'})
// beforeDestroy阶段才会真正执行
console.log("尝试再次触发one-time")
this.$emit('one-time-event') //也不会被执行了
console.log("测试完成")
},1000);
},1000);
},
beforeDestroy() {
console.log("开始销毁组件...")
// $off的典型用法 -在组件销毁前清除所有自定义事件的绑定关系,防止内存泄漏!
if(this.eventHandler){
this.$off("custom-events",this.evenhandler);
delete evenhandler;
evenhandler=null;
}else{
/*如果没有保存过引用变量*/
/*方式1*/
var that=this;
that._events["custome-events"]&&that._events["custome-events"].length>0&&that._events["custome-events"].forEach(function(item){
that.$$of(item.fn);
});
/*方式2*/
for(var key in (that._events||{})){
if(key.indexOf && key.indexOf("custome-")===0){
that.$$of(key);
}
}
}
}
}
文章点评