Vue3嵌套实例组件切换路由时如何触发beforeUnmount()？

问题原因 #

从/view2切换回/时，View2组件会被路由卸载，但你通过createApp创建的独立Vue实例与主应用完全分离，主应用不会自动销毁这个独立实例，导致实例内的ExtraComp、TestComponent组件无法触发beforeUnmount钩子。

解决方案 #

在View2组件的beforeUnmount钩子中手动销毁这个独立Vue实例，具体修改如下：

修改View2.vue的代码，保存独立实例的引用，并在组件卸载时调用unmount()方法：

<template>
  <div>
    <h1>View 2</h1>
    <button @click="redirect">Go to view 1</button>

    <div id="extra_container"></div>
  </div>
</template>

<style scoped>
#extra_container {
  background-color: wheat;
  height: 3em;
  width: 100%;
}
</style>

<script>
import ExtraComp from "./ExtraComp.vue";
import TestComponent from "./TestComponent.vue";
import { createApp } from "vue";

export default {
  data() {
    return {
      extraApp: null // 存储独立Vue实例的引用
    };
  },
  mounted() {
    // 创建实例并保存引用
    this.extraApp = createApp(ExtraComp)
      .component("Test", TestComponent)
      .mount("#extra_container");
  },
  methods: {
    redirect() {
      this.$router.push({ path: "/" });
    },
  },
  beforeUnmount() {
    // 手动销毁独立实例，触发内部组件的卸载钩子
    if (this.extraApp) {
      this.extraApp.unmount();
    }
  }
};
</script>

原理说明 #

调用独立Vue实例的unmount()方法会：

• 触发实例根组件（ExtraComp）及其子组件（TestComponent）的beforeUnmount和unmounted生命周期钩子
• 清理实例绑定的DOM元素和事件监听
• 释放实例占用的资源，避免内存泄漏

额外建议 #

除非有特殊业务需求，否则不建议在Vue组件内创建独立的Vue实例，这种写法会增加应用复杂度和内存泄漏风险。如果只是需要局部渲染组件，直接在View2的模板中引入组件即可：

<template>
  <div>
    <h1>View 2</h1>
    <button @click="redirect">Go to view 1</button>

    <ExtraComp /> <!-- 直接引入组件，无需独立实例 -->
  </div>
</template>

<script>
import ExtraComp from "./ExtraComp.vue";
import TestComponent from "./TestComponent.vue";

export default {
  components: {
    ExtraComp,
    Test: TestComponent // 注册全局组件改为局部注册
  },
  methods: {
    redirect() {
      this.$router.push({ path: "/" });
    },
  },
};
</script>

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