本文旨在解决 Vue.js 3 Composition API 单页应用中，页面刷新或重新加载时出现的重复挂载问题。通过检测现有挂载点，避免重复创建应用实例，并提供卸载旧实例的方案，确保应用的生命周期管理更加规范，避免潜在的性能问题和逻辑错误。
在 Vue.js 3 的单页应用开发中，尤其是在使用 Composition API 时，可能会遇到页面刷新或重新加载时重复挂载应用实例的问题。这会导致控制台出现警告，更重要的是，可能会触发一些副作用，例如重复执行生命周期钩子，导致数据不一致或性能下降。以下提供一种解决方案，以确保应用在重新加载时能够正确地卸载和重新挂载。
检测现有应用实例
核心思路是在挂载应用之前，检测目标容器是否已经挂载了 Vue 应用。如果已经挂载，则复用已有的实例，或者先卸载再重新挂载。
以下代码展示了如何在 main.js 中实现这个逻辑：
立即学习“前端免费学习笔记（深入）”；
// Import methods and component.
import { createApp} from 'vue';
import router from './router';
import App from './App.vue';
let app = null; // 初始化 app 为 null
let containerSelector = "#app";
// check if app has been mounted already
const mountPoint = document.querySelector(containerSelector);
if (mountPoint && mountPoint.__vue_app__ !== undefined) {
// 已经挂载，获取现有实例
app = mountPoint.__vue_app__._instance.proxy;
console.warn("应用已挂载，复用现有实例。");
} else {
// create a new app instance
app = createApp(App);
// Install the required instances like plugin, component and directive.
app.use(router);
// Mount 'app' (App.vue) as root component.
app.mount(containerSelector);
console.log("创建并挂载新的应用实例。");
}这段代码首先尝试获取已有的应用实例。如果找到已挂载的应用，则复用它。否则，创建一个新的应用实例并挂载到指定的容器。
卸载现有应用实例
如果需要确保每次加载都是一个全新的应用实例，可以在检测到已有实例时先卸载它，然后再创建新的实例。
// Import methods and component.
import { createApp} from 'vue';
import router from './router';
import App from './App.vue';
let app = null;
let containerSelector = "#app";
// check if app has been mounted already
const mountPoint = document.querySelector(containerSelector);
if (mountPoint && mountPoint.__vue_app__ !== undefined) {
// 已经挂载，卸载现有实例
const existingApp = mountPoint.__vue_app__;
existingApp.unmount();
console.warn("应用已挂载，卸载现有实例。");
// 创建新的应用实例
app = createApp(App);
app.use(router);
app.mount(containerSelector);
console.log("创建并挂载新的应用实例。");
} else {
// create a new app instance
app = createApp(App);
// Install the required instances like plugin, component and directive.
app.use(router);
// Mount 'app' (App.vue) as root component.
app.mount(containerSelector);
console.log("创建并挂载新的应用实例。");
}这段代码在检测到已有实例时，先调用 app.unmount() 卸载它，然后再创建一个新的应用实例并挂载。
注意事项
- 生命周期钩子： 确保在 App.vue 中使用 onUnmounted 生命周期钩子来清理任何全局状态或资源，以避免内存泄漏。
- 全局状态管理： 如果应用使用了全局状态管理（例如 Vuex），需要在卸载应用时重置状态，以避免状态污染。
- 组件状态： 确保组件内部的状态在卸载后得到正确的清理，避免在重新挂载时出现意外的行为。
总结
通过检测和卸载现有应用实例，可以有效地解决 Vue.js 3 Composition API 单页应用中页面刷新或重新加载时重复挂载的问题。选择复用现有实例还是卸载并重新创建实例，取决于应用的具体需求。在卸载应用时，务必注意清理全局状态和资源，以确保应用的稳定性和性能。
