renxing2436
renxing2436
  • 发布:2023-03-03 15:23
  • 更新:2023-03-06 16:06
  • 阅读:1272

【报Bug】vue3项目自定义组件中onPageShow/onPageHide无效

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window11

第三方开发者工具版本号: RC 1.0.6.2301171

基础库版本号: 2.30.2

项目创建方式: CLI

CLI版本号: 3.0.0-3061820230117001

示例代码:

自定义组件
/components/example/example.vue

<template>  
  <view></view>  
</template>  

<script>  
export default {  
  data() {  
    return {}  
  },  

  onPageShow() {  
    console.log('页面显示')  
  },  

  onPageHide() {  
    console.log('页面隐藏')  
  },  

  methods: {},  
}  
</script>  

<style lang="scss" scoped></style>  

父级页面
/pages/index/index

<template>  
  <view>  
    <example></example>  
  </view>  
</template>  

<script setup lang="ts"></script>  

<style lang="scss" scoped></style>  

操作步骤:

参考代码示例

预期结果:

同vue2一样能 正常显示

实际结果:

无任何效果

bug描述:

如题所示
vue3 项目,自定义组件是用 选项式,父级页面是 组合式
onPageShow 和 onPageHide 无效
在 vue2 项目中 没有问题

2023-03-03 15:23 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

应该是 onShow onHide 吧

  • renxing2436 (作者)

    都试过了,没有任何效果,如果将自定义组件修改为 组合式,使用 onShow 和 onHide 就可以触发

    2023-03-03 18:17

  • DCloud_UNI_WZF

    回复 renxing2436: 提供下测试工程,谢谢

    2023-03-06 09:50

  • renxing2436 (作者)

    回复 DCloud_UNI_WZF: 测试工程及说明 见 下方 回复

    2023-03-06 16:07

renxing2436

renxing2436 (作者)

本机 系统为 window 11,node 版本为 18.14.2
使用 yarn (1.22.19) 编译和运行项目
创建项目命令 文档(通过vue-cli命令行)
vue2 正式版, vue3 typescript 工程

分别创建了 vue3 和 vue2 项目
vue3 项目,组件分别有 组合式 和 选项式
组合式使用 onShow 和 onHide 能触发相应的事件
选项式 使用 onPageShow、onPageHide 或 onShow、onHide 都无法触发相应的事件

vue2 项目,组件只有 选项式
onPageShow、onPageHide 能触发相应事件,onShow、onHide 不能触发,也符合预期

  • DCloud_UNI_WZF

    问题复现,感谢反馈,这边确认下

    2023-03-06 18:27

  • DCloud_UNI_WZF

    vue3 只有组合式 api 支持 组件使用 页面生命周期

    另:组件中使用页面生命周期并不是框架刻意支持的能力,不推荐使用

    2023-03-08 11:40

  • renxing2436 (作者)

    回复 DCloud_UNI_WZF: 组件使用页面生命周期这个在某种情况下还是比较方便的,比如说 自定义一个 swiper、notice 组件等(vue2 和 vue3 都支持的通用组件,目前只能使用选项式),在页面隐藏时,停止自动轮播,再次显示时,继续轮播,如果通过父级组件进行传递生命周期事件会非常不方便也不太现实,在vue2中可以使用 onPageShow、onPageHide 进行监听,但放到 vue3 项目中就失效了,由于只能使用组合式,在vue3项目中,组件就无法监听页面的显示与隐藏

    除此之外,是否有其他办法能解决这个问题?

    2023-03-09 08:34

  • DCloud_UNI_WZF

    回复 renxing2436: 可以尝试使用vue的生命周期是否满足你的需求,另外 一个项目要同时兼容 vue2 3的需求是什么呢

    2023-03-09 09:54

  • renxing2436 (作者)

    回复 DCloud_UNI_WZF: 比如说 uni-ui 就是兼容 vue2 和 vue3 的,旧项目是vue2,新项目使用 vue3,为了减少不必要的维护成本,使用同一套UI框架,所以只能使用低版本兼容高版本的形式来写UI框架

    2023-03-09 10:51

  • renxing2436 (作者)

    回复 DCloud_UNI_WZF: 这个问题是否可以被修复么?

    2023-03-15 08:39

  • DCloud_UNI_WZF

    回复 renxing2436: 上面已回复目前支持情况,其余情况暂无支持计划

    2023-03-15 09:54

  • 特哦那首歌

    回复 DCloud_UNI_WZF: 你好,请问你说的“vue3 只有组合式 api 支持 组件使用 页面生命周期” 应该如何写呀?

    2024-04-12 15:06

  • DCloud_UNI_WZF

    回复 特哦那首歌: <script setup>

    onLoad(),

    onPageShow()

    </script>

    2024-04-23 11:24

要回复问题请先登录注册