年少的张三丰
年少的张三丰
  • 发布:2024-04-16 16:31
  • 更新:2024-05-06 11:48
  • 阅读:74

【报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 分享
已邀请:
DCloud_UNI_HRK

DCloud_UNI_HRK

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

  • 年少的张三丰 (作者)

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

    2024-04-25 11:30

DCloud_UNI_OttoJi

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

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

要回复问题请先登录注册