（二）Vue3.x应用程序API

接下来的章节中我们将依次剖析Vue3.x中的各个选项、方法及部分功能的实现方式方法。

这篇我们将主要介绍到的是Vue3.x实例下的API。

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

在Vue 3.x中，可以将Vue的全局配置移到createApp方法中（例如在Vue 2.x中，我们用Vue.component()来注册全局组件，现在app.component()来创建全局组件）；使用createApp来创建一个应用根实例（类似于Vue 2.x的 new Vue() ）;由于该方法返回的是应用程序本身，所以可以进行链式调用其他方法来处理相应的事件。如下列举：

1、component（全局组件）

参数：1、String - 组件名称 2、Function | Object - 组件。
用法：用于检索或注册全局组件，注册组件会以给定的name来作为组件名称。
用例：

import { createApp } from 'vue';
const app = createApp({});
// myComponent 为组件实例
app.component('my-component', myComponent);
// 重置组件
const MyComponent = app.component('my-component', {});

2、config（全局配置）

用法：应用程序的全局配置，请参照下一章（三）Vue3.x应用配置。
用例：

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

3、directive（全局指令）

参数：1、name - 指令名称 2、Function | Object - 指令。
用法：用于检索或注册全局指令，注册会以给定的name来作为指令名称。
用例：

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

// 注册指令
app.directive('my-directive', {
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    update() {},
    beforeUnmount() {},
    unmount() {}
});

// 更新指令
app.directive('my-directive', () => {
    // 更新该指令的某个或多个周期处理函数
});

// 获取指令
const myDirective = app.directive('my-directive');

4、mixin（全局混合）

参数：Object
用法：在全局实例中注入混合，会影响到所有的组件实例，不推荐使用

5、mount（节点挂载）

参数：Element - 节点。
用法：将应用程序的根组件挂载到指定的DOM元素上
用例：

import { createApp } from 'vue';
const app = createApp({});
app.mount('#my-app');

6、provide、inject （父组件数据注入与子孙组件数据获取）

参数：Object | () => Object 。
概述：provide一般与inject一起使用，provide为当前实例的所有子孙组件注入数据，inject在当前实例的子孙组件中获取注入的数据
用例：

import { createApp } from 'vue';
// 全局注入数据
const app = createApp({
    provide: {
        user: 'zhang_san'
    }
});
// 获取数据
app.component('my-component', {
    inject: ['user'],
    data() {...}
});

注意：注意：当父组件provide注入的数据发生变化时，所有子孙组件的inject同步更新（推荐使用provide来注入一个响应式变量）。

7、unmount（取消挂载）

参数：Element - 节点。
用法：在提供的DOM元素上取消Vue实例的挂载
用例：

import { createApp } from 'vue';
const app = createApp({})
// 挂载
app.mount('#my-app');
// 取消挂载
setTimeout(() => app.unmount('#my-app'), 2000);

8、use（插件）

参数：Object | Function - 插件。
用法：与Vue 2.x类似，如果参数为对象，则需要提供一个install的方法；如果参数本身就是一个方法，那么这个方法将默认为安装插件的方法；在进行方法的调用时，Vue将作为第一个参数传入方法中。

注意：同一个插件多次调用use时，该插件也只能被安装一次。

下一章：（三）Vue3.x应用配置
上一章：（一）Vue3.x different Vue2.x

ps：哪有什么岁月静好，只是有人在为你负重前行。

最后编辑于：2021.01.11 15:25:28