【Vue3】Vue实例API介绍

在Vue3中，使用vue中的createApp方法可以创建一个Vue应用实例。

import { createApp } from "vue";
const app = createApp({});
console.log("🚀 ~ file: main.ts ~ line 6 ~ app", app);

该app提供了一个应用实例上下文。应用实例即app挂载的整个组件树共享相同的上下文，createApp 方法返回应用实例本身，因此可以在其后链式调用其它方法。
1、component方法：

注册或检索全局组件。注册还会使用给定的 name 参数自动设置组件的 name。

component(name: string): Component<any, any, any, ComputedOptions, MethodOptions> | undefined
// 检索注册的组件
const MyComponent = app.component('my-component')

component(name: string, component: Component<any, any, any, ComputedOptions, MethodOptions>): App<Element>

// 注册一个选项对象
app.component('my-component', {
  /* ... */
})

2、config属性
一个包含应用配置的对象。

import { createApp } from 'vue'
const app = createApp({})

app.config = {...}

3、directive方法
注册或检索全局指令。

import { createApp } from 'vue'
const app = createApp({})

// 注册
app.directive('my-directive', {
  // 指令具有一组生命周期钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 在绑定元素的父组件挂载之后调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 在绑定元素的父组件卸载之后调用
  unmounted() {}
})

// 注册 (函数指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
})

// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')

4、mount方法
所提供 DOM 元素的 innerHTML 将被替换为应用根组件的模板渲染结果。

<div id="my-app"></div>

import { createApp } from 'vue'

const app = createApp({})
// 做一些必要的准备
app.mount('#my-app')

应用实例生命周期图：【来源vue.js官网】

beforeCreate——>created——>beforeMount——>mounted(beforedUpdate——>updated)——>beforedUnmount——>unmount——>beforeDestroy——>destroyed
5、provide方法
设置一个可以被注入到应用范围内所有组件中的值。组件应该使用 inject 来接收 provide 的值。

从 provide/inject 的角度来看，可以将应用程序视为根级别的祖先，而根组件是其唯一的子级。

该方法不应该与 provide 组件选项或组合式 API 中的 provide 方法混淆。虽然它们也是相同的 provide/inject 机制的一部分，但是它们是用来配置组件而非应用所 provide 的值。

provide 和 inject 绑定不是响应式的，如果你向下传递一个响应式对象，这个对象上的 property 会保持响应式。

import { createApp } from 'vue'

const app = createApp({
  inject: ['user'],
  template: `
    <div>
      {{ user }}
    </div>
  `
})

app.provide('user', 'administrator') //key-value

6、unmount方法
卸载应用实例的根组件

<div id="my-app"></div>

import { createApp } from 'vue'

const app = createApp({})
// 做一些必要的准备
app.mount('#my-app')

// 挂载 5 秒后，应用将被卸载
setTimeout(() => app.unmount(), 5000)

7、use
安装 Vue.js 插件。如果插件是一个对象，则它必须暴露一个 install 方法。如果插件本身是一个函数，则它将被视为 install 方法。

该 install 方法将以应用实例作为第一个参数被调用。传给 use 的其他 options 参数将作为后续参数传入该安装方法。
当在同一个插件上多次调用此方法时，该插件将仅安装一次。

import { createApp } from 'vue'
import MyPlugin from './plugins/MyPlugin'

const app = createApp({})

app.use(MyPlugin)
app.mount('#app')