uni-app hbuilder从4.29更新到后续版本都会导致编译出来的抖音小程序生命周期触发顺序异常

uni-app hbuilder从4.29更新到后续版本都会导致编译出来的抖音小程序生命周期触发顺序异常

示例代码：

父组件在加载完成的生命周期里调用子组件方法，在4.29以后的版本全部报错。 但是最早使用4.29及以前的版本，均可以确保生命周期和加载顺序符合预期

onMounted(() => {
	couponList.value.initList()
	nearbyArea.value.init()
	experienceCoupon.value.init()
})

操作步骤：

  1. 创建一个项目
  2. 创建一个页面
  3. 创建子组件，并且抛出方法
  4. 在父组件onMounted调用这个方法，这个时候会提示couponList.value为Null

预期结果：

子组件onMounted的触发应该早于父组件

实际结果：

当前会提示couponList.value为null调用方法失败

bug描述：

我们在开发抖音小程序的过程中，发现一旦hbuilder更新到4.29以后的版本，业务组件的生命周期就变得不再可控。

开发环境 版本号 项目创建方式
Windows HBuilderX
4.75
v4.4.3
基础库 3.77.0.14

更多关于uni-app hbuilder从4.29更新到后续版本都会导致编译出来的抖音小程序生命周期触发顺序异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

您好，麻烦发下可复现demo

更多关于uni-app hbuilder从4.29更新到后续版本都会导致编译出来的抖音小程序生命周期触发顺序异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


父组件： <template> <RefTest ref="testRef"></RefTest> </template>

<script setup> import { ref, onMounted } from "vue" import RefTest from '@/components/common/RefTest.vue'
</script>

子组件： <template>

6666
</template>
<script setup> const testFuc = function () { console.log('测试函数') } defineExpose({ testFuc: testFuc }) </script>
<style> </style>

这是一个已知的版本兼容性问题。从HBuilderX 4.29开始，uni-app框架对抖音小程序的生命周期执行顺序进行了调整，导致父组件的onMounted可能先于子组件执行。

问题分析： 在4.29之前的版本中，子组件的onMounted确实早于父组件执行，这是Vue的默认行为。但后续版本中，抖音小程序的渲染机制发生变化，父子组件生命周期顺序出现异常。

解决方案：

  1. 使用nextTick延迟调用：
onMounted(() => {
  nextTick(() => {
    couponList.value.initList()
    nearbyArea.value.init()
    experienceCoupon.value.init()
  })
})
  1. 改用onReady生命周期：
onReady(() => {
  couponList.value.initList()
  nearbyArea.value.init()
  experienceCoupon.value.init()
})
  1. 使用ref回调确保组件实例就绪：
const couponList = ref(null)

onMounted(() => {
  if (couponList.value) {
    couponList.value.initList()
  }
})
回到顶部