接下來的章節中我們將依次剖析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：哪有什么歲月靜好，只是有人在為你負重前行。