uni-app 抖音小程序嵌套组件生命周期执行顺序有问题

uni-app 抖音小程序嵌套组件生命周期执行顺序有问题

产品分类：

uniapp/小程序/字节跳动

信息类别 详细信息
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.08
第三方开发者工具版本号 4.2.2
基础库版本号 3.16.0.0
项目创建方式 HBuilderX

示例代码：

<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>

<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>

<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有关联。

抖音生命周期异常

微信生命周期正常


更多关于uni-app 抖音小程序嵌套组件生命周期执行顺序有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

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

更多关于uni-app 抖音小程序嵌套组件生命周期执行顺序有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

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

还没修复吗

在 uni-app 开发抖音小程序时，嵌套组件的生命周期执行顺序可能会与预期不一致，这通常是由于小程序平台的生命周期机制与 uni-app 框架的差异引起的。以下是一些可能的原因及解决方案：

1. 抖音小程序的生命周期机制

抖音小程序的生命周期与微信小程序类似，但可能存在一些差异。例如：

  • 父组件和子组件的生命周期顺序：在小程序平台中，父组件的生命周期可能早于子组件执行，或者在某些情况下，子组件的生命周期会先于父组件执行。
  • 页面和组件的生命周期：页面的生命周期和组件的生命周期可能相互影响，导致执行顺序不一致。

2. uni-app 框架的处理

uni-app 在编译到抖音小程序时，会将 Vue 的生命周期映射到小程序的生命周期。这种映射可能在小程序平台上表现不一致，尤其是在嵌套组件的情况下。

3. 常见问题及解决方案

问题：父组件的 onLoad 先于子组件的 created 执行

在小程序中，父组件的 onLoad 可能先于子组件的 created 执行，导致子组件无法正确获取父组件传递的数据。

解决方案：

  • 使用 watch 监听父组件传递的 props，确保数据变化时子组件能正确响应。
  • 在父组件的 onReady 生命周期中触发数据更新，确保子组件已经初始化。
// 父组件
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  onReady() {
    this.message = 'Updated Message';
  }
};

// 子组件
export default {
  props: ['message'],
  watch: {
    message(newVal) {
      console.log('Message updated:', newVal);
    }
  }
};

问题：子组件的生命周期未按预期执行

在某些情况下，子组件的生命周期可能未按预期执行，例如 mounted 或 onLoad 未被触发。

解决方案：

  • 确保子组件被正确引入和使用。
  • 检查是否存在条件渲染（如 v-if），导致子组件未初始化。
  • 使用 nextTick 确保 DOM 更新后再执行相关逻辑。
export default {
  mounted() {
    this.$nextTick(() => {
      console.log('子组件 mounted');
    });
  }
};

问题：页面生命周期与组件生命周期冲突

页面生命周期（如 onLoad、onShow）可能干扰组件的生命周期执行。

解决方案：

  • 在页面生命周期中手动触发组件的初始化逻辑。
  • 使用 ref 获取子组件实例并调用其方法。
// 页面
export default {
  onLoad() {
    this.$refs.childComponent.init();
  }
};

// 子组件
export default {
  methods: {
    init() {
      console.log('子组件初始化');
    }
  }
};
回到顶部