【基础篇】Vue3中 createApp创建实例，相关常用API汇总

tips: 关于createApp创建应用实例，以及应用实例一些常用的方法，在开发中也是比较容易忽视的，本篇是对其进行简单的总结。官网传送门

创建应用

createApp()

• 第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props
• 创建一个应用App并返回，对整个应用进行应用配置和资源注册

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

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

const app = createApp(App) // 创建应用
console.log(app)  // 先不着急mount，打印一下应用

App的应用配置和资源注册

挂载应用

app.mount()

• .mount() 接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串
• .mount() 方法应该始终在整个应用配置和资源注册完成后被调用
• 返回值是根组件实例而非应用实例本身

interface App {
  mount(rootContainer: Element | string): ComponentPublicInstance
}

卸载应用

app.unmount()

• 卸载应用会触发组件树全部的组件执行卸载操作

interface App {
  unmount(): void
}

组件注册

app.component()

• 传入组件名和组件，则注册一个组件，返回应用实例本身
• 传入组件名则为获取组件，返回组件

interface App {
  component(name: string): Component | undefined
  component(name: string, component: Component): this
}

定义指令

app.directive()

• 传入指令名称和指令配置对象，则定义一个指令，返回应用实例本身
• 传入指令名，则为获取指令，返回指令

interface App {
  directive(name: string): Directive | undefined
  directive(name: string, directive: Directive): this
}

注册插件

app.use()

• 第一个参数是插件（带有install方法的对象或被用作install方法的函数），第二个参数是插件的选项参数，会传入到install中，返回值是应用实例本身
  编写插件

interface App {
  use(plugin: Plugin, ...options: any[]): this
}

混入

app.mixin() Vue3中不再推荐使用，推荐使用组合式函数

应用层注入

app.provide()

• 第一个参数应当是注入的 key，第二个参数则是提供的值。返回应用实例本身
  依赖注入

interface App {
  provide<T>(key: InjectionKey<T> | symbol | string, value: T): this
}

配置对象 config

app.config.xx

每个应用实例都会暴露一个 config 对象，其中包含了对这个应用的配置设定。你可以在挂载应用前更改这些属性 (下面列举了每个属性的对应文档)

app.config.globalProperties 一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。

interface AppConfig {
  globalProperties: Record<string, any>
}

试用一下

// 定义
app.config.globalProperties.msg = 'hello'

// 组件内使用
export default {
  mounted() {
    console.log(this.msg) // 'hello'
  }
}