Vue3 中多次调用 createApp 的正确方法及应用场景
Vue3 中的 createApp 方法在多次调用时容易产生误解。本文将探讨如何在 Vue3 中正确地多次调用 createApp，并通过两个实际场景阐述其应用方法，避免常见错误。
场景一：手动挂载弹窗组件
Vue2 中，可以使用 vue.extend 创建组件实例并手动挂载。Vue3 中，extend 已被弃用，改用 createApp。然而，直接多次调用 createApp 会导致问题：第二次调用的返回值与第一次不同，且缺少 unmount 方法。
正确的调用方式：
const app = createApp(MyComponent); // MyComponent 为你的组件 app.mount(el); // 卸载应用 app.unmount();
错误的调用方式：
立即学习“前端免费学习笔记（深入）”；
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 方法的关键对象。
