Vue3的createApp详解

createApp 是 Vue3 应用创建的入口函数，用于生成 Vue 应用实例，是 Vue3 官方推荐的应用初始化方式

Vue3 的‌实现了多实例隔离机制，在Vue2（new Vue()）中只能有一个全局唯一的应用实例，只能挂载到一个根元素，并且全局共享配置。但是在vue3（createApp()）中允许多实例共存 ，每个实例独立配置（组件/插件/指令）并且每个实例可挂载到不同容器 ‌。

1.基本用法

function createApp(rootComponent: Component, rootProps?: object): App

 ‌rootComponent：组件对象（根组件（.vue 单文件组件或选项式对象））

 ‌rootProps：传递给根组件的初始 props（需与组件 props 声明匹配）

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

多应用共存

const app1 = createApp(App1).mount('#app1');
const app2 = createApp(App2).mount('#app2');

2. 返回值

createApp 返回一个 应用实例（app），支持以下关键

1.mount(selector)

• 将应用挂载到 DOM 元素上，参数可以是 CSS 选择器（如 #app）或实际的 DOM 元素。
• 注意：挂载后，Vue 会接管该 DOM 的渲染。

2. unmount()

• 卸载应用，释放资源。

app.unmount()

3. use(plugin, [options])

• 注册插件（如 Vue Router、Vuex）

4. component(name, [definition])

• 注册或获取全局组件。

app.component('MyComponent', MyComponent)

5. directive(name, [definition])

• 注册或获取全局指令

app.directive('focus', {
  mounted(el) { el.focus() }
})

 6.

3. 应用配置（app.config）

通过 app.config 可以调整应用级配置：

1. app.config.globalProperties

• 添加全局属性（类似 Vue 2 的 Vue.prototype）。

app.config.globalProperties.$myMethod = function() {
  console.log('Global method')
}

2. app.config.errorHandler

• 全局错误处理。

app.config.errorHandler = (err, instance, info) => {
  console.error('Error:', err, info)
}

3.app.config.warnHandler

• 警告信息处理（开发环境）。

app.config.warnHandler = (msg, instance, trace) => {
  console.warn('Warning:', msg)
}

 4.高阶用法

createApp()封装一个实现父组件可控制卸载的组件，通过 ‌动态创建独立应用实例‌ 实现组件的自主生命周期管理

适用于全局弹窗/通知/加载提示

// utils/createComponent.ts
import { createApp, Component, App } from 'vue';

export function createComponent<TProps extends object>(
  Component: Component,
  props?: TProps
) {
  // 创建独立容器
  const container = document.createElement('div');
  document.body.appendChild(container);
 // 定义销毁方法
  const close= () => {
    if (app) {
      app.unmount();
      document.body.removeChild(container);
      app = null; // 释放内存
    }
  };

  // 创建子应用实例
  let app: App | null = createApp(Component, {
    ...props,
    // 暴露关闭方法给组件内部
    onClose: () => close()
  });


  // 挂载应用
  app.mount(container);

  return {
    close,
    // 可扩展其他控制方法
  };
}

// 父组件向子组件传参
createApp(Component, { 
  ...props,      // 常规 props
  onClose: destroy // 传递控制方法
});

// 子组件内部触发关闭
// MessageBox.vue
<script setup>
defineProps<{ onClose?: () => void }>();

const handleClose = () => {
  emit('close');       // 标准 Vue 事件
  props.onClose?.();   // 通过 prop 回调
};
</script>

//CSS 需使用 position: fixed 确保定位正确
<!-- ParentComponent.vue -->
<script setup lang="ts">
import { createComponent } from '@/utils/createComponent';
import MessageBox from './MessageBox.vue';

// 创建可控实例
const { close} = createComponent(MessageBox, {
  title: '弹框',
  content: '是否确认操作？'
});

// 父组件主动销毁
const handleClose = () => {
  close();
};
</script>

<template>
  <button @click="handleClose">强制关闭弹窗</button>
</template>