(二)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:哪有什么岁月静好,只是有人在为你负重前行。

你可能感兴趣的:((二)Vue3.x应用程序API)