uni-app 差量编译多次触发缓存监听问题

uni-app 差量编译多次触发缓存监听问题

开发环境 版本号 项目创建方式
HbuilderX 3.1.6 HBuilderX 
## 示例代码：

```javascript
uni.$on('longinHandler', () => {  
    console.log('longinHandler=======')  
});

uni.$emit('longinHandler')

操作步骤：

uni.$on('longinHandler', () => {  
    console.log('longinHandler=======')  
});

uni.$emit('longinHandler')

预期结果：

差量编译，重置监听器，通信几次 触发几次

实际结果：

差量编译，通信一次 触发两次

bug描述：

页面A onLoad 钩子函数中 注册

uni.$on('longinHandler', () => {  
    console.log('longinHandler=======')  
});

页面B 触发

uni.$emit('longinHandler')

当项目文件比较多的情况下 修改单个文件 ， $on 绑定回调会被执行多次


更多关于uni-app 差量编译多次触发缓存监听问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

创建一个 新项目 未复现

更多关于uni-app 差量编译多次触发缓存监听问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的全局事件监听重复注册问题。在uni-app中，uni.$on是全局事件监听，当页面多次加载时，如果没有在页面卸载时及时清理监听器，就会导致重复注册。

问题分析：

  1. 页面A每次onLoad都会执行uni.$on注册监听
  2. 差量编译热重载时，页面重新加载但之前的监听器未被清除
  3. 每次热重载都会新增一个监听器，导致事件触发次数递增

解决方案：

在页面A的onUnload生命周期中移除监听器：

// 页面A
onLoad() {
  uni.$on('longinHandler', this.loginCallback)
},
onUnload() {
  uni.$off('longinHandler', this.loginCallback)
},
methods: {
  loginCallback() {
    console.log('longinHandler=======')
  }
}

或者使用一次性监听：

// 页面A
onLoad() {
  uni.$once('longinHandler', () => {
    console.log('longinHandler=======')
  })
}
回到顶部