本文旨在解决Vue.js 3 Composition API中单页应用(SPA)刷新或重新加载页面时，Webpack提示重复挂载应用实例的问题。通过检查应用是否已挂载，避免不必要的重新挂载，从而优化应用性能并防止意外的副作用。本文提供了一种实用的解决方案，并附带代码示例，帮助开发者在Vue.js 3项目中更有效地管理应用实例。
在Vue.js 3的单页应用开发中，当用户刷新或重新加载页面时，可能会遇到Webpack发出警告，提示应用实例已经被挂载在宿主容器上。这是因为在main.js中，每次页面加载都会尝试创建一个新的Vue应用实例并将其挂载到指定的DOM元素上。如果不加以处理，这会导致性能问题，并可能触发一些组件生命周期钩子函数多次执行，导致不可预期的行为。
解决这个问题，核心在于在挂载应用之前，先检查目标DOM元素是否已经存在Vue应用实例。如果存在，则不再创建新的实例，避免重复挂载。
下面是修改后的main.js代码示例：
立即学习“前端免费学习笔记（深入）”；
// 导入必要的模块和组件
import { createApp } from 'vue';
import router from './router';
import App from './App.vue';
let app = null; // 初始化app变量
const containerSelector = '#app'; // 定义容器选择器
// 检查应用是否已经挂载
const mountPoint = document.querySelector(containerSelector);
if (mountPoint && mountPoint.__vue_app__ !== undefined) {
// 如果已经存在挂载点，则获取已存在的应用实例
app = mountPoint.__vue_app__._instance.proxy;
console.log("App already mounted, reusing existing instance.");
} else {
// 如果不存在挂载点，则创建新的应用实例
app = createApp(App);
// 安装插件，如路由
app.use(router);
// 挂载应用到指定的DOM元素
app.mount(containerSelector);
console.log("App mounted successfully.");
}代码解释：
- 变量声明： 声明app变量，用于存储Vue应用实例。containerSelector变量定义了应用挂载的目标DOM元素的选择器。
- 检查挂载点： 使用document.querySelector(containerSelector)获取挂载点DOM元素。
-
条件判断：
- 如果mountPoint存在，并且mountPoint.__vue_app__不为undefined，则说明该DOM元素已经挂载了一个Vue应用实例。此时，我们直接获取已存在的应用实例，赋值给app变量，并输出一条消息到控制台。mountPoint.__vue_app__._instance.proxy可以获取到Vue组件实例。
- 如果mountPoint不存在，或者mountPoint.__vue_app__为undefined，则说明该DOM元素还没有挂载Vue应用实例。此时，我们创建一个新的Vue应用实例，安装必要的插件，然后将其挂载到指定的DOM元素上，并输出一条消息到控制台。
- 避免重复挂载： 通过以上判断，可以避免在刷新或重新加载页面时重复创建和挂载Vue应用实例。
注意事项：
- 如果不需要使用已存在的app实例，可以在if代码块中使用app.unmount()卸载现有的实例，然后在条件块之外创建新的实例并挂载。
- 确保在任何情况下，app变量都被正确赋值，避免后续代码引用未定义的变量。
- 此方法仅适用于单页应用，多页应用每次加载都会重新创建应用实例。
总结：
通过在main.js中添加对应用实例是否已经存在的判断，可以有效地避免在Vue.js 3单页应用中重复挂载应用实例的问题。这不仅可以优化应用性能，还可以防止由于重复执行组件生命周期钩子函数而导致的意外行为。这个方法简单易用，适用于大多数Vue.js 3项目。
