uni-app H5监听bug（已上传附件）

uni-app H5监听bug（已上传附件）

bug描述：

在tabbar第一个页面中，使用子组件，子组件监听了第一个页面的值
问题来了： 当切换tabbar为第二个页面的时候，会触发第一个页面中组组件内的watch，导致出现报错
app-nvue、微信小程序均正常，只有h5出现报错

附件运行：
需要在app.vue、pages/tabbar/index/index中把请求改成路径改成自己的再测试

信息 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 2.8.2
手机系统 Android
手机系统版本号 Android 10
手机厂商 小米
手机机型 红米note7
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

ceshi.rar

image


更多关于uni-app H5监听bug（已上传附件）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

仔细看了代码，问题应该是出在 c-page-state 里的计算属性里依赖了一个获取当前路由的函数， 切换页面导致 pageMainRequestState() 更新, 组件也更新了：

computed: {
pageMainRequestState() {
console.log(‘this.$store.state.pageMainRequestState’, this.$store.state.pageMainRequestState)
return this.$store.state.pageMainRequestState[this.$currentPagePath()];
},
},

$currentPagePath() {
var pages = getCurrentPages();
var page = pages[pages.length - 1];
return page.route;
},

如果需要获取当前路径，可以通过 props 在组件初始化的时候传进去。

更多关于uni-app H5监听bug（已上传附件）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


那我为何小程序没问题呢？所以我郁闷的在这啊，如果说都有问题，那肯定写的哪里不合适。现在只在一个h5下有问题，所以我才觉得是bug呀

回复 choin: 各端表现不一样，我再了解一下，就你这个问题来说应该是上面的情况，感谢反馈

回复 jxtian: 感谢，希望能给予一个答案，弄了好几天没搞明白问题所在之处。给我的感觉像是uni在h5端的调用顺序可能与小程序平台不一样，所以产生了这种问题。

求解决

求解决

确认bug，等待处理

千呼万唤，重于来了~太好了

我发现这个问题，在发行后就不出现了 是关闭了调试错误输出吗？？ 还是其他可能性？

这是一个典型的H5页面生命周期与组件watch监听冲突的问题。在H5环境下，切换tabbar页面时，第一个页面虽然被隐藏但并未完全销毁，导致子组件的watch仍然会被触发。

解决方案建议：

  1. 在子组件的watch中添加页面可见性判断：
watch: {
  value(newVal) {
    if(!this.$page || this.$page.$visible) {
      // 正常逻辑
    }
  }
}
  1. 或者使用页面生命周期控制watch执行：
onHide() {
  this.isActive = false
},
onShow() {
  this.isActive = true
},
watch: {
  value(newVal) {
    if(!this.isActive) return
    // 正常逻辑
  }
}
  1. 也可以考虑在离开页面时手动清空监听：
onUnload() {
  this.unwatch && this.unwatch()
}
回到顶部