在 Vue.js 3 单页应用开发中，有时会遇到页面刷新或重新进入时，控制台出现 [Vue warn]: There is already an app instance mounted on the host container. 警告，提示应用实例已被挂载。这通常意味着在同一个挂载点重复执行了 app.mount()，可能导致一些副作用，例如 setup() 函数中的逻辑被多次执行。本文将介绍如何避免这种情况，确保应用在刷新或重新进入时能够正确处理。
问题分析
当用户刷新页面或者通过路由重新进入应用时，main.js 中的代码会重新执行。如果不加处理，createApp(App).use(router).mount('#app') 会再次执行，导致新的应用实例挂载到同一个 DOM 节点上，从而触发警告。此外，如果 App.vue 的
解决方案：检测已挂载的应用实例
解决这个问题的关键在于，在执行 app.mount() 之前，先检查目标 DOM 节点是否已经挂载了 Vue 应用实例。如果已经挂载，则不再重复挂载，否则创建新的应用实例并挂载。
以下是修改后的 main.js 代码：
立即学习“前端免费学习笔记（深入）”；
// Import methods and component.
import { createApp} from 'vue';
import router from './router';
import App from './App.vue';
let app = "";
let containerSelector = "#app";
// check if app has been mounted already
const mountPoint = document.querySelector(containerSelector);
if (mountPoint && mountPoint.__vue_app__ !== undefined) {
// Set the existing mount point to 'app'.
app = mountPoint.__vue_app__._instance.proxy;
}
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);
}这段代码首先获取目标 DOM 节点（#app）。然后，检查该节点是否已经存在 __vue_app__ 属性。如果存在，说明该节点已经挂载了 Vue 应用实例，直接将现有的实例赋值给 app 变量。否则，创建一个新的 Vue 应用实例，安装插件和路由，并将其挂载到目标 DOM 节点。
可选方案：卸载现有实例
如果你希望每次都创建一个新的应用实例，而不是复用现有的实例，可以在 if 语句块中先卸载现有的应用实例，然后再创建新的实例并挂载。
// Import methods and component.
import { createApp} from 'vue';
import router from './router';
import App from './App.vue';
let app = "";
let containerSelector = "#app";
// check if app has been mounted already
const mountPoint = document.querySelector(containerSelector);
if (mountPoint && mountPoint.__vue_app__ !== undefined) {
// Get the existing app instance
app = mountPoint.__vue_app__._instance.proxy;
// Unmount the existing app
app.unmount();
// 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);
}
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);
}注意： 使用 app.unmount() 可能会导致一些状态丢失，因此需要根据实际情况选择是否卸载现有实例。
总结
通过检测已挂载的应用实例，可以有效避免 Vue.js 3 单页应用中重复挂载的问题。这不仅可以消除控制台警告，还可以防止 setup() 函数中的逻辑被多次执行，从而确保应用的稳定性和性能。根据实际需求，可以选择复用现有实例或卸载现有实例并创建新的实例。选择哪种方案取决于你的应用场景和对状态管理的需求。
