在 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 alreadyconst 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 alreadyconst 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() 函数中的逻辑被多次执行，从而确保应用的稳定性和性能。根据实际需求，可以选择复用现有实例或卸载现有实例并创建新的实例。选择哪种方案取决于你的应用场景和对状态管理的需求。
以上就是Vue.js 3 应用卸载与重新挂载：避免重复挂载的实用指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511756.html
微信扫一扫 
支付宝扫一扫 
