Vue 3 到底有什么不同:全局 API

微信扫一扫,分享到朋友圈

Vue 3 到底有什么不同:全局 API

Vue 的 2.x 版本有很多的全局 API 和 配置,他们会在全局范围内改变 Vue 的行为。

常见的全局配置有:Vue.config.silent / Vue.config.devtools / Vue.config.productionTip

比如(官方例子),如果你想创建一个全局的组件,你会用到 Vue.component
:

Vue.component('trump-sucks', {
data: () => ({ position: 'America president', }),
template: `<h1>Trump is the worst ${position}</h1>`;
});

或者声明一个全局指令:

Vue.directive('focus', {
inserted: el => {
console.log('聚焦!');
el.focus();
},
});

这样确实比较方便,但是会造成一些问题。首先要明确的一点是,Vue 2.x 在设计上并没有 app(应用)的概念。开发者在使用 Vue 2.x 时所谓的 app 不过是一个用 new Vue()
创建的 Vue 实例罢了(呵,不过如此)。 由同一个 Vue 构造函数创建的 Vue 实例都会共享来自构造函数的全局配置
。这将会导致:

在测试过程中,由于全局配置的存在,测试用例很容易就会被“污染”。开发者需要小心翼翼地讲全局配置找一个地方存下来,在每次测试结束后将其还原,比如 Vue.config.errorHandler
;一些 API 比如 Vue.use
Vue.mixin
甚至没有避免其影响的办法。这使得在测试中一旦涉及了插件,整个过程都会变得非常棘手。事实上,为了解决这个问题,vue-test-utils 不得不引入一个特殊的 API: createLocalVue

import { createLocalVue, mount } from '@vue/test-utls';
const localVue = createLocalVue();
localVue.use(MyPlugin);
mount(Component, { localVue });

还有一个避免不了的问题是,一旦页面上有多个 Vue 实例时,它们的全局配置就很自然地共享了,但在很多时候开发者并不想要这样的结果

Vue.mixin({
mounted: () => {
console.log('wubba lubba dub dub');
},
});
const rick = new Vue({ el: '#rick' });
const morty = new Vue({ el: '#morty' });

因此,为了规避这些问题,Vue 3 引入了 应用实例
的概念。

全局 API: createApp

调用 createApp
会返回一个 应用实例
,没错, 应用实例
这个概念是 Vue 3 中新引入的。

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

应用实例会暴露一个当前全局 API 的子集。在这个重构工作中,Vue 团队秉承的经验法则是: 任何会在全局范围内影响 Vue 行为的 API 都会被迁移至应用实例中去

2.x 的全局 API 3.x 的应用实例 API
Vue.config app.config
Vue.config.productionTip 移除
Vue.config.ignoredElements app.config.isCustomElement
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use

其他不会在全局影响 Vue 行为的 api 都已改造为具名导出的构建方式(named exports),就像之前尤雨溪尤大在直播里说的那样: 为了支持 TreeShaking

挂载一个应用实例

在使用 createApp(VueInstance)
得到一个应用实例后,这个应用实例就可以用来把整个 Vue 跟实例挂载到页面上了:

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

在完成了这些改造之后, 开篇我们提到的那些例子将会重写成这样:

app.component('trump-sucks', {
data: () => ({ position: 'America president', }),
template: `<h1>Trump is the worst ${position}</h1>`;
});
app.directive('focus', {
inserted: el => {
console.log('聚焦!');
el.focus();
},
});
// 至此,所有在 app 所包含的组件树内创建的 Vue 实例才会共享 trump-sucks 这个组件和 focus 这个指令,而 Vue 构造函数并没有被污染。

多个应用实例的配置共享

上文提到的“不是所有开发者都想要的全局配置共享”,在 Vue 3 中可以通过工厂函数的方式实现:

import { createApp } from 'vue';
import CaiXuKun from './CXK.vue';
import WuYiFan from './WYF.vue';
const createIdolApp = (IdolInstance) => {
const idolApp = createApp(IdolInstance);
idolApp.directive('sing-and-dance', {
inserted: () => {
console.log('I am cool!');
},
});
}
createIdolApp(CaiXuKun).mount('#caixukun');
createIdolApp(WuYiFan).mount('#wuyifan');

这样就能实现多个应用实例的配置共享了:蔡徐坤和吴亦凡都有了一个叫做“唱跳”的 Vue 自定义指令。

想要了解更多信息,请访问官方: https://v3.vuejs.org/guide/mi…
(目前还没有中文版)

文章首发于我的卫星攻肿号,请点击: 这里

微信扫一扫,分享到朋友圈

Vue 3 到底有什么不同:全局 API

Vue 学习笔记(一)初遇

上一篇

华为Mate 40稳了!曝5nm麒麟1020芯片比苹果A14更大、成本更高

下一篇

你也可能喜欢

Vue 3 到底有什么不同:全局 API

长按储存图像,分享给朋友