【vue3】vue3的应用实例是什么和怎么使用

简言

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例。
应用实例指的就是createApp的返回值，它是一个对象，里面包含了多个vue相关的属性，例如component（组件）、directive（指令）use（插件)、runWithContext（vue运行上下文）、version（版本）等；我们使用这个实例对象，调用mount函数挂载到dom上，就可以创建一个vue单页应用（SPA）。

vue应用实例

createApp函数

创建一个应用实例。

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

第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。
它有两种调用方法：

• 直接在参数上写vue根组件 。

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
  template: `hello World!`,

})

• 导入别处的vue组件当作根组件。

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

const app = createApp(App)
console.log(app);

mount函数

将应用实例挂载在一个容器元素中。
当你以及创建好了vue应用实例，页面中还无法展现你的vue应用实例，你还需要调用mount函数将实例挂载到目标dom内，才可以展现出来。

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

参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)。返回根组件的实例。

如果该组件有模板或定义了渲染函数，它将替换容器内所有现存的 DOM 节点。否则在运行时编译器可用的情况下，容器元素的 innerHTML 将被用作模板。
对于每个应用实例，mount() 仅能调用一次。

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

const app = createApp(App)
console.log(app);

const vueRootO = app.mount('#app')
console.log(vueRootO);

其他函数和属性

应用实例还用一些其他函数，用于绑定全局的功能：

函数	描述
unmount函数	卸载一个已挂载的应用实例。卸载一个应用会触发该应用组件树内所有组件的卸载生命周期钩子。
component函数	如果同时传递一个组件名字符串及其定义，则注册一个全局组件；如果只传递一个名字，则会返回用该名字注册的组件 (如果存在的话)。
driective函数	如果同时传递一个名字和一个指令定义，则注册一个全局指令；如果只传递一个名字，则会返回用该名字注册的指令 (如果存在的话)。
use函数	安装一个插件。第一个参数应是插件本身，可选的第二个参数是要传递给插件的选项。若 app.use() 对同一个插件多次调用，该插件只会被安装一次。
mixin函数	应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例。 兼容用的，项目不推荐使用
provide函数	传递一个应用实例全局可用的值，inject接收
runWithContext函数	使用当前应用作为注入上下文执行回调函数。
version属性	提供当前应用所使用的 Vue 版本号。这在插件中很有用，因为可能需要根据不同的 Vue 版本执行不同的逻辑。
config属性	每个应用实例都会暴露一个 config 对象，其中包含了对这个应用的配置设定。你可以在挂载应用前更改这些属性 。app.config

结语

结束了。