接下來(lái)的章節(jié)中我們將依次剖析Vue3.x中的各個(gè)選項(xiàng)漏设、方法及部分功能的實(shí)現(xiàn)方式方法。
這篇我們將主要介紹到的是Vue3.x實(shí)例下的API今妄。
import { createApp } from 'vue';
const app = createApp({});
在Vue 3.x中郑口，可以將Vue的全局配置移到createApp方法中（例如在Vue 2.x中，我們用Vue.component()來(lái)注冊(cè)全局組件盾鳞，現(xiàn)在app.component()來(lái)創(chuàng)建全局組件）犬性；使用createApp來(lái)創(chuàng)建一個(gè)應(yīng)用根實(shí)例（類似于Vue 2.x的 new Vue() ）;由于該方法返回的是應(yīng)用程序本身，所以可以進(jìn)行鏈?zhǔn)秸{(diào)用其他方法來(lái)處理相應(yīng)的事件腾仅。如下列舉：
1仔夺、component（全局組件）
參數(shù)：1、String - 組件名稱 2攒砖、Function | Object - 組件缸兔。
用法：用于檢索或注冊(cè)全局組件，注冊(cè)組件會(huì)以給定的name來(lái)作為組件名稱吹艇。
用例：
import { createApp } from 'vue';
const app = createApp({});
// myComponent 為組件實(shí)例
app.component('my-component', myComponent);
// 重置組件
const MyComponent = app.component('my-component', {});
2惰蜜、config（全局配置）
用法：應(yīng)用程序的全局配置，請(qǐng)參照下一章 （三）Vue3.x應(yīng)用配置受神。
用例：
import { createApp } from 'vue';
const app = createApp({});
app.config = {...};
3抛猖、directive（全局指令）
參數(shù)：1、name - 指令名稱 2、Function | Object - 指令财著。
用法：用于檢索或注冊(cè)全局指令联四，注冊(cè)會(huì)以給定的name來(lái)作為指令名稱。
用例：
import { createApp } from 'vue';
const app = createApp({});
// 注冊(cè)指令
app.directive('my-directive', {
beforeMount() {},
mounted() {},
beforeUpdate() {},
update() {},
beforeUnmount() {},
unmount() {}
});
// 更新指令
app.directive('my-directive', () => {
// 更新該指令的某個(gè)或多個(gè)周期處理函數(shù)
});
// 獲取指令
const myDirective = app.directive('my-directive');
4撑教、mixin（全局混合）
參數(shù)：Object
用法：在全局實(shí)例中注入混合朝墩，會(huì)影響到所有的組件實(shí)例，不推薦使用
5伟姐、mount（節(jié)點(diǎn)掛載）
參數(shù)：Element - 節(jié)點(diǎn)收苏。
用法：將應(yīng)用程序的根組件掛載到指定的DOM元素上
用例：
import { createApp } from 'vue';
const app = createApp({});
app.mount('#my-app');
6、provide愤兵、inject （父組件數(shù)據(jù)注入與子孫組件數(shù)據(jù)獲嚷拱浴）
參數(shù)：Object | () => Object 。
概述：provide一般與inject一起使用秆乳，provide為當(dāng)前實(shí)例的所有子孫組件注入數(shù)據(jù)懦鼠，inject在當(dāng)前實(shí)例的子孫組件中獲取注入的數(shù)據(jù)
用例：
import { createApp } from 'vue';
// 全局注入數(shù)據(jù)
const app = createApp({
provide: {
user: 'zhang_san'
}
});
// 獲取數(shù)據(jù)
app.component('my-component', {
inject: ['user'],
data() {...}
});
注意：注意：當(dāng)父組件provide注入的數(shù)據(jù)發(fā)生變化時(shí)，所有子孫組件的inject同步更新（推薦使用provide來(lái)注入一個(gè)響應(yīng)式變量）屹堰。
7葛闷、unmount（取消掛載）
參數(shù)：Element - 節(jié)點(diǎn)。
用法：在提供的DOM元素上取消Vue實(shí)例的掛載
用例：
import { createApp } from 'vue';
const app = createApp({})
// 掛載
app.mount('#my-app');
// 取消掛載
setTimeout(() => app.unmount('#my-app'), 2000);
8双藕、use（插件）
參數(shù)：Object | Function - 插件淑趾。
用法：與Vue 2.x類似，如果參數(shù)為對(duì)象忧陪，則需要提供一個(gè)install的方法扣泊；如果參數(shù)本身就是一個(gè)方法，那么這個(gè)方法將默認(rèn)為安裝插件的方法嘶摊；在進(jìn)行方法的調(diào)用時(shí)延蟹，Vue將作為第一個(gè)參數(shù)傳入方法中。
注意：同一個(gè)插件多次調(diào)用use時(shí)叶堆，該插件也只能被安裝一次阱飘。
下一章：（三）Vue3.x應(yīng)用配置
上一章：（一）Vue3.x different Vue2.x
ps：哪有什么歲月靜好，只是有人在為你負(fù)重前行虱颗。
