Vue3 中 createApp 函数的用法，尤其是在需要多次调用和卸载应用的场景下，可能会让开发者感到困惑。本文将深入探讨这个问题，并提供有效的解决方案。
问题：多次调用 createApp 并卸载
Vue3 的 createApp 函数通常被认为只能调用一次。但在某些情况下，例如在弹窗或表格中动态渲染组件，我们需要手动挂载和卸载组件。这会导致两个主要问题：
-
手动挂载弹窗： Vue2 中可以使用
Vue.extend创建组件实例并用$mount挂载。Vue3 中extend已被移除，使用createApp代替。然而，多次调用createApp后，返回的实例可能缺少unmount方法，无法卸载。立即学习“前端免费学习笔记（深入）”；
-
表格自定义列： 在表格的
render函数中自定义列，导出数据时需要渲染虚拟节点 (vnode) 并获取渲染后的文本内容。多次调用createApp渲染 vnode，同样面临无法卸载的问题。
问题根源：createApp 的调用方式
问题在于 createApp 的调用和 mount 方法的组合使用。直接在 createApp 后立即调用 mount，返回的是 mount 方法的结果，而不是 createApp 创建的应用实例。因此，后续调用 createApp 返回的实例将缺少 unmount 方法。
解决方案：正确调用 createApp 和 mount
正确的调用顺序是：先调用 createApp 获取应用实例，再调用该实例的 mount 方法。 代码示例如下：
const app = createApp(App); // App 为你的组件
app.mount('#app');
// 之后可以调用 unmount 方法
app.unmount();
这样，createApp 返回的 app 实例就包含了 unmount 方法，允许多次调用 createApp 并正确卸载应用。
应用场景示例：
场景一：手动挂载弹窗
const buttonComponent = {
// ... 你的组件定义 ...
};
const buttonApp = createApp(buttonComponent);
buttonApp.mount(this.$refs.container);
// ... 之后卸载 ...
buttonApp.unmount();
场景二：表格自定义列
const vNode = h(item.prop, { row }); // 使用 h 函数创建虚拟节点
const rowApp = createApp({
render() {
return vNode;
}
});
rowApp.mount('#temp-row'); // 挂载到一个临时的容器
// 获取渲染后的 textContent
const el = document.getElementById('temp-row');
const value = el.textContent;
rowObj[item.label] = value;
// 卸载临时应用
rowApp.unmount();
通过这种方法，可以安全地多次调用 createApp 并正确卸载应用，满足动态渲染组件的需求。 记住始终使用 createApp 返回的实例来调用 mount 和 unmount 方法。 对于场景二，使用一个临时的、不可见的容器 (#temp-row) 来挂载临时应用，避免影响页面布局。
