年少的张三丰
年少的张三丰
  • 发布:2024-04-16 16:31
  • 更新:2025-08-11 18:01
  • 阅读:550

【报Bug】抖音小程序嵌套组件生命周期执行顺序有问题。

分类:uni-app

产品分类: uniapp/小程序/抖音

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 4.08

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

基础库版本号: 3.16.0.0

项目创建方式: HBuilderX

示例代码:

index.vue

<template>  
    <div>  
        <component-a v-bind:user-name="userName" />  
    </div>  
</template>  

<script>  
    import ComponentA from "./components/ComponentA.vue"  

    export default {  
        components: {ComponentA},  
        data() {  
            return {  
                userName: '张三'  
            }  
        }  
    }  
</script>  

ComponentA.vue

<template>  
    <div>  
        <div class="">A中直接渲染:{{studentName}}</div>  
        <component-b v-bind:user-name="studentName"/>  

    </div>  
</template>  

<script>  
    import ComponentB from "./ComponentB.vue"  

    export default {  
        components: {ComponentB},  
        props: {  
            userName: {  
                required: true  
            }  
        },  
        data() {  
            return {  
                viewReady: false,  
                studentName: this.userName  
            }  
        },  
        created(){  
            console.log("组件A created")  
        },  
        mounted(){  
            console.log("组件A mounted")  
        }  
    }  
</script>

ComponentB.vue

<template>  
    <div>组件B中渲染:{{user.name}}</div>  
</template>  

<script>  
    export default {  
        props: {  
            userName: {  
                required: true  
            }  
        },  
        data() {  
            return {  
                user:{  
                    name:this.userName  
                }  
            }  
        },  
        created(){  
            console.log("组件B created")  
        },  
        mounted(){  
            console.log("组件B mounted")  
        }  
    }  
</script>

操作步骤:

下载附件中的代码直接运行即可。

预期结果:

预期打印顺序为:
组件A created
组件B created
组件B mounted
组件A mounted

实际结果:

实际打印顺序为
组件A created
组件A mounted
组件B created
组件B mounted

bug描述:

uniapp开发的抖音小程序嵌套组件的生命周期执行顺序有误,微信表现正常。
抖音小程序表现为父组件mounted之后,其子组件才created。
此问题可能和之前提交的抖音小程序,嵌套组件拿到的props为null有关联。

抖音生命周期异常如下:

抖音生命周期异常

微信生命周期正常 如下:

微信生命周期正常

2024-04-16 16:31 负责人:DCloud_UNI_OttoJi 分享
已邀请:
HRK_01

HRK_01

感谢反馈,已复现该问题。需要排查一下原因

  • 年少的张三丰 (作者)

    好的,感谢您的回复,这个问题预计什么时候可以修复呢?

    2024-04-25 11:30

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

感谢反馈,看起来和你提到的另一个问题相似,我合并处理,有进展我会更新

1***@qq.com

1***@qq.com

修复了没

  • DCloud_UNI_OttoJi

    这个问题是抖音小程序底层限制,最终导致的生命周期触发和微信小程序不一样,你是有具体的业务场景依赖这个吗,你可以具体描述下?看是否有具体的解决方案

    2025-08-13 18:06

  • 1***@qq.com

    回复 DCloud_UNI_OttoJi: 在多层组件嵌套,并且用了组件插槽,会导致父组件先渲染,此时子组件延迟渲染的问题。页面表现为渲染卡顿。在微信小程序、APP等平台无此问题

    2025-08-14 10:10

  • DCloud_UNI_OttoJi

    回复 1***@qq.com: 给一个复现工程,问题明显会提到优先级。

    2025-08-14 10:49

  • 1***@qq.com

    回复 DCloud_UNI_OttoJi: https://ask.dcloud.net.cn/question/212645 在这个工单中已提供demo,demo比较简单,所以渲染延迟看着不明显,但生命周期日志能看出来。页面内容稍微多一点的时候渲染延迟就比较明显

    2025-08-14 11:37

要回复问题请先登录注册