Vue 3.0 全局API Treeshaking

vicky.yu

#2.x 语法
如果你曾经在 Vue 中手动操作过 DOM，你可能会遇到以下模式：

import Vue from 'vue'
Vue.nextTick(() => {
  // 一些和DOM有关的东西
})
或者，如果你一直在对涉及 async components 的应用程序进行单元测试，那么很可能你编写了以下内容：

import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
test('an async feature', async () => {
  const wrapper = shallowMount(MyComponent)
  // 执行一些DOM相关的任务
  await wrapper.vm.$nextTick()
  // 运行你的断言
})
Vue.nextTick() 是一个全局的 API 直接暴露在单个 Vue 对象上——事实上，实例方法 $nextTick() 只是一个方便的包装 Vue.nextTick() 为方便起见，回调的 this 上下文自动绑定到当前实例。

模块捆绑程序，如 webpack 支持 tree-shaking，这是“死代码消除”的一个花哨术语。不幸的是，由于代码是如何在以前的 Vue 版本中编写的，全局 API Vue.nextTick() 不可摇动，将包含在最终捆绑中不管它们实际在哪里使用。

#3.x 语法
在 Vue 3 中，全局和内部 API 都经过了重构，并考虑到了 tree-shaking 的支持。因此，全局 API 现在只能作为 ES 模块构建的命名导出进行访问。例如，我们之前的片段现在应该如下所示：

import { nextTick } from 'vue'
nextTick(() => {
  // 一些和DOM有关的东西
})
and

import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
import { nextTick } from 'vue'
test('an async feature', async () => {
  const wrapper = shallowMount(MyComponent)