Vue3新版本特性- 全局API

1、全局API破Vue 2.x具有许多全局性地改变Vue行为的全局API和配置。例如，要创建全局组件，可以使用如下所示的VponentAPI：Vponent(button-counter, data: () = ( count: 0 ), template: Clicked count times.)123456同样，这是声明全局指令的方式：Vue.directive(focus, inserted: el = el.focus()123尽管此方法很方便，但会导致两个问题。从技术上讲，Vue 2没有“应用”的概念。我们定义为应用程序只是通过创建的根Vue实例new Vue()。从同一个Vue构造函数创建的每个根实例都共享相同的全局配置。结果是： 全局配置使测试过程中意外污染其他测试案例变得容易。用户需要仔细存储原始的全局配置，并在每次测试后将其还原（例如，重置Vue.config.errorHandler）。像一些APIVue.use和Vue.mixin甚至没有办法恢复自己的影响。这使得涉及插件的测试特别棘手。实际上，vue-test-utils必须实现一个特殊的APIcreateLoca

2、lVue来处理此问题：import createLocalVue, mount from vue/test-utils/ create an extended Vue constructorconst localVue = createLocalVue()/ install a plugin “globally” on the “local” Vue constructorlocalVue.use(MyPlugin)/ pass the localVue to the mount optionsmount(Component, localVue )12345678910 全局配置使得很难在同一页面上的多个“应用”之间共享相同的Vue副本，但是具有不同的全局配置。 / this affects both root instances Vue.mixin( /* . */ ) const app1 = new Vue( el: #app-1 ) const app2 = new Vue( el: #app-2 )1234567为了避免这些问题，我们在Vue 3中引入了新的全局API：cre

3、ateApp调用createApp返回一个应用程序实例，这是Vue 3中的一个新概念。import createApp from vueconst app = createApp()123应用程序实例公开了当前全局API的子集。经验法则是，现在可以将全局更改Vue行为的所有API移至应用程序实例。下表列出了当前的全局API及其对应的实例API：2.x全局API3.x实例API（app）Vue.configapp.configVue.config.production提示删除（见下文）Vue.config.ignoredElementsapp.config.isCustomElement（见下文）Vue组件应用组件Vue指令应用指令Vuemixin混合蛋白语音使用app.use（请参阅下文）如Global API Treeshaking中所述，所有其他不会全局改变行为的全局API现在都称为export。config.productionTip已移除在Vue 3.x中，“使用生产版本”技巧仅在使用“ dev +完整版本”（包括运行时编译器并带有警告的版本）时显示。对于ES模块内部版本，由于

4、它们与捆绑程序一起使用，并且在大多数情况下，CLI或样板将正确配置生产环境，因此该提示将不再显示。config.ignoredElements就是现在config.isCustomElement引入此配置选项旨在支持本机自定义元素，因此重命名可以更好地传达其功能。新选项还期望有一个比旧字符串/ RegExp方法具有更大灵活性的函数：/ beforeVue.config.ignoredElements = my-el, /ion-/ afterconst app = Vue.createApp()app.config.isCustomElement = tag = tag.startsWith(ion-)123456重要在3.0中，检查元素是否为组件的检查已移至模板编译阶段，因此仅在使用运行时编译器时才使用此config选项。如果您使用的是仅运行时的构建，则isCustomElement必须改为vue/compiler-dom在构建设置中将其传递给-例如，通过compilerOptionsvue-loader中的选项。 如果config.isCustomElement在使用仅运行时构建时

5、分配了，则将发出警告，指示用户改为在构建设置中传递选项；否则，将显示警告。 这将是Vue CLI配置中的新顶级选项。插件作者须知插件作者通常使用来自动将插件安装在其UMD版本中Vue.use。例如，这是官方vue-router插件在浏览器环境中的自身安装方式：var inBrowser = typeof window != undefined/* */if (inBrowser & window.Vue) window.Vue.use(VueRouter)12345由于useVue 3中不再提供全局API，因此此方法将停止工作，并且调用Vue.use()现在将触发警告。相反，最终用户现在必须使用应用程序实例上的插件来明确指定：const app = createApp(MyApp)app.use(VueRouter)12挂载应用程序实例使用初始化之后createApp(/* options */)，该应用程序实例app可用于通过以下方式挂载Vue根实例app.mount(domTarget)：import createApp from vueimport MyApp from ./My

6、App.vueconst app = createApp(MyApp)app.mount(#app)12345经过所有这些更改，本指南开头的组件和指令将被重写为如下所示：const app = createApp(MyApp)ponent(button-counter, data: () = ( count: 0 ), template: Clicked count times.)app.directive(focus, mounted: el = el.focus()/ now every application instance mounted with app.mount(), along with its/ component tree, will have the same “button-counter” component/ and “focus” directive without polluting the global environmentapp.mount(#app)1234567891011121314151617提供/注入类似于provide在2.x根实例中

7、使用该选项，Vue 3应用程序实例还可以提供可以由应用程序内部的任何组件注入的依赖项：/ in the entryapp.provide(guide, Vue 3 Guide)/ in a child componentexport default inject: book: from: guide , template: book 123456789101112在应用之间共享配置在应用之间共享配置（例如组件或指令）的一种方法是创建工厂功能，如下所示：import createApp from vueimport Foo from ./Foo.vueimport Bar from ./Bar.vueconst createMyApp = options = const app = createApp(options) app.directive(focus /* . */) return appcreateMyApp(Foo).mount(#foo)createMyApp(Bar).mount(#bar)12345678910111213现在，该focus指令将在Foo和Bar实例及其

8、后代中可用。全局API摇动破2.x语法如果您曾经不得不在Vue中手动操作DOM，则可能会遇到以下模式：import Vue from vueVue.nextTick() = / something DOM-related)12345或者，如果您已经对涉及异步组件的应用程序进行了单元测试，那么您可能已经编写了以下内容：import shallowMount from vue/test-utilsimport MyComponent from ./MyComponent.vuetest(an async feature, async () = const wrapper = shallowMount(MyComponent) / execute some DOM-related tasks await wrapper.vm.$nextTick() / run your assertions)123456789101112Vue.nextTick()是直接在单个Vue对象上公开的全局API 实际上，实例方法$nextTick()只是一个方便的包装Vue.nextTick()，this为方便起见，回调的上下文自动绑定到当前实例。但是，如果您从不必处理手动DOM操作，或者在我们的应用程序中也不使用或测试异步组件该怎么办？或者，如果出于某种原因，您更喜欢使用旧版旧版window.setTimeout()呢

《Vue3新版本特性- 全局API》由会员一***分享，可在线阅读，更多相关《Vue3新版本特性- 全局API》请在金锄头文库上搜索。