f***@163.com
f***@163.com
  • 发布:2021-01-12 11:18
  • 更新:2024-03-01 12:38
  • 阅读:2073

【报Bug】子组件的onShow,onLoad,onHide,onReady等生命周期事件在HBuilderX内置Web浏览器和最新Chrome,Edge浏览器都不会执行

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 1909

HBuilderX类型: 正式

HBuilderX版本号: 3.0.5

浏览器平台: Chrome

项目创建方式: HBuilderX

示例代码:

<template>
<view>
<view style="padding-bottom: 50px;">
<home v-if="PageCur=='home'"></home>
<ticket v-if="PageCur=='basics'"></ticket>
<message v-if="PageCur=='component'"></message>
<chat v-if="PageCur=='plugin'"></chat>
</view>
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" @click="NavChange" data-cur="home">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/home.gif'"></image>
</view>
<view :class="PageCur=='home'?'text-green':'text-gray'">首页</view>
</view>
<view class="action" @click="NavChange" data-cur="component">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/component.png'"></image>
</view>
<view :class="PageCur=='component'?'text-green':'text-gray'">最新消息</view>
</view>
<view class="action" @click="NavChange" data-cur="basics">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/basics.png'"></image>
</view>
<view :class="PageCur=='basics'?'text-green':'text-gray'">优惠券</view>
</view>
<view class="action" @click="NavChange" data-cur="plugin">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/plugin.png'"></image>
</view>
<view :class="PageCur=='plugin'?'text-green':'text-gray'">在线聊天</view>
</view>
</view>
</view>
</template>

操作步骤:

直接打开页面或者通过v-if来显示隐藏页面都不会触发子组件message的生命周期事件

预期结果:

子组件可以正常触发生命周期事件onShow,onLoad,onHide,onReady

实际结果:

没有正常触发生命周期事件onShow,onLoad,onHide,onReady

bug描述:

  • 子组件的onShow,onLoad,onHide,onReady等生命周期事件在HBuilderX内置Web浏览器和最新Chrome,Edge浏览器都不会执行。
  • 子组件的onReady事件在微信内置浏览器中会执行,但onShow,onLoad,onHide不会执行。
2021-01-12 11:18 负责人:无 分享
已邀请:
f***@163.com

f***@163.com (作者)

后续发现子组件中使用Vue组件的生命周期created,mounted,destroyed方法都是可以执行的。

f***@163.com

f***@163.com (作者)

https://uniapp.dcloud.net.cn/collocation/frame/lifecycle?id=%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
组件生命周期文档中已经有参考。

SS112233

SS112233

请问怎么解决的

  • 1***@qq.com

    挖坟可耻,文档说了组件有组件的生命周期,页面有页面的生命周期,跟vue不同

    2022-12-22 11:23

  • 1***@qq.com

    https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle

    2022-12-22 11:24

  • SS112233

    回复 1***@qq.com: 谢谢,麻烦了

    2022-12-22 14:56

aspack001

aspack001 - 老程序猿

https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle
uniapp中组件生命周期没有onRead,可以用mounted组件生命周期
uni-app 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:

函数名 说明 平台差异说明 最低版本
beforeCreate 在实例初始化之前被调用。详见
created 在实例创建完成后被立即调用。详见
beforeMount 在挂载开始之前被调用。详见
mounted 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见 仅H5平台支持
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见 仅H5平台支持
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。详见
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

要回复问题请先登录注册