Vue3子组件未触发重新创建的原因咨询

父组件通过v-if结合started变量控制HelloWorld子组件的显示与隐藏：点击start按钮可创建并显示子组件；子组件的exit按钮能触发父组件将started设为false，销毁子组件，功能正常。但子组件的remake按钮触发父组件的remake方法时，先将started设为false再设为true，预期子组件应先销毁再重新创建，实际仅更新当前组件，未触发created和unmounted生命周期钩子。使用setTimeout异步设置started为true或为组件添加:key强制重渲染可解决问题，咨询该现象的底层原因。

代码示例 #

<template>
  <div v-if="started">
    <HelloWorld :msg="msg" @exit="exit" @remake="remake" />
  </div>
  <button v-if="!started" @click="started = !started">start</button>
</template>

<script>
import HelloWorldVue from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
  },
  data() {
    return {
      started: false,
      msg: "Hello Vue 3 in CodeSandbox!",
    };
  },
  methods: {
    exit() {
      this.started = false;
    },
    remake() {
      this.msg = this.msg + 1;
      // 预期销毁重建子组件，但实际未生效
      this.exit();
      this.started = true;
      // 异步方式可解决
      // setTimeout(() => {
      //   this.started = true;
      // });
    },
  },
};
</script>

1. Vue异步批量更新机制是核心原因 #

Vue的响应式系统会批量收集同一事件循环中的状态变更，然后一次性计算最终的DOM更新，而非每次修改状态就立即更新DOM。

在remake方法中，同步执行的started = false和started = true两次修改会被合并到同一个更新批次：

• Vue最终只会取started的最终值（true）判断组件显示状态；
• 由于变更前后started的最终值未发生变化，Vue判定组件显示状态无改动，因此不会触发销毁重建，仅更新组件props（如msg的变化）。

2. 异步方式（setTimeout）的解决逻辑 #

setTimeout将started = true的操作放到下一个事件循环中，脱离当前更新批次：

• 第一次started = false触发独立更新批次，Vue销毁子组件；
• 下一个事件循环执行started = true时，触发新的更新批次，重新创建子组件，完整触发unmounted和created生命周期钩子。

3. :key强制重渲染的解决逻辑 #

Vue的组件复用逻辑基于key标识：

• 当v-if状态变化时，若组件key值改变，Vue会判定这是全新组件实例，不会复用旧组件，直接销毁旧实例并创建新实例；
• 因此给HelloWorld绑定唯一:key（如:key="msg"或自增ID），即使started同步切换，Vue也会因key变化触发组件销毁重建。

内容的提问来源于stack exchange，提问作者Megumin