Vue.js 3 Composition API 中单页应用卸载与重载的正确姿势-js教程-PHP中文网

Vue.js 3 Composition API 中单页应用卸载与重载的正确姿势

花韻仙語

发布： 2025-07-21 16:30:01

原创

484人浏览过

vue.js 3 composition api 中单页应用卸载与重载的正确姿势

本文旨在解决 Vue.js 3 Composition API 单页应用中，页面刷新或重新加载时出现的重复挂载问题。通过检测现有挂载点，避免重复创建应用实例，并提供卸载旧实例的方案，确保应用的生命周期管理更加规范，避免潜在的性能问题和逻辑错误。

在 Vue.js 3 的单页应用开发中，尤其是在使用 Composition API 时，可能会遇到页面刷新或重新加载时重复挂载应用实例的问题。这会导致控制台出现警告，更重要的是，可能会触发一些副作用，例如重复执行生命周期钩子，导致数据不一致或性能下降。以下提供一种解决方案，以确保应用在重新加载时能够正确地卸载和重新挂载。

检测现有应用实例

核心思路是在挂载应用之前，检测目标容器是否已经挂载了 Vue 应用。如果已经挂载，则复用已有的实例，或者先卸载再重新挂载。

以下代码展示了如何在 main.js 中实现这个逻辑：

立即学习“前端免费学习笔记（深入）”；

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

// 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() 卸载它，然后再创建一个新的应用实例并挂载。