Vue3 中多次调用 createApp 的正确方法及应用场景

Vue3 中的 createApp 方法在多次调用时容易产生误解。本文将探讨如何在 Vue3 中正确地多次调用 createApp，并通过两个实际场景阐述其应用方法，避免常见错误。

场景一：手动挂载弹窗组件

Vue2 中，可以使用 vue.extend 创建组件实例并手动挂载。Vue3 中，extend 已被弃用，改用 createApp。然而，直接多次调用 createApp 会导致问题：第二次调用的返回值与第一次不同，且缺少 unmount 方法。

正确的调用方式：

const app = createApp(MyComponent); // MyComponent 为你的组件
app.mount(el);

// 卸载应用
app.unmount();

错误的调用方式：

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

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

const app = createApp(MyComponent).mount(el); // app 丢失 unmount 方法
app.unmount(); // 报错

只有先获取 createApp 的返回值，才能正确调用 unmount 方法卸载应用。

场景二：自定义表格列渲染及数据导出

在表格中使用 render 函数自定义列内容，并希望导出渲染后的结果。需要手动挂载 render 函数，获取渲染后的 textContent，再填充到表格数据中。

关键代码：

const vNode = item.prop({ row });
const rowApp = createApp({
  render() {
    return h(vNode);
  },
}).mount('#temp-row'); // #temp-row 为一个临时容器
const value = rowApp.el.textContent; // 获取渲染后的文本内容
rowObj[item.label] = value;

// 卸载临时应用
rowApp.unmount();

此方法确保获取到渲染后的结果，并及时卸载临时应用，避免开发工具中出现多个未卸载的应用。

通过以上两个场景，我们可以理解 createApp 的正确使用方法，并在需要多次调用 createApp 的情况下，确保正确地挂载和卸载应用，避免潜在问题。 记住，createApp 返回的实例才是拥有 mount 和 unmount 方法的关键对象。