vue3.0的global-api-treeshaking怎么用

本文小编为大家详细介绍“vue3.0的global-api-treeshaking怎么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue3.0的global-api-treeshaking怎么用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

import { nextTick, observable } from 'vue'

nextTick(() => {})

const obj = observable({})

随着Vue API的增长，我们一直在努力平衡功能和捆绑包大小之间的权衡。我们希望将Vue的大小开销保持在最小，但由于大小限制，我们也不想限制其功能。

通过ES模块的静态分析友好设计，现代化的打包机与缩减程序相结合，现在可以消除未在捆绑包中任何地方使用的ES模块导出。我们可以重组Vue的全局和内部API，以利用此优势，以便用户只为他们实际使用的功能付费。

此外，知道可选功能不会增加不使用它们的用户的捆绑包大小，因此我们现在有更多空间在核心中包含可选功能。

当前在2.x中，所有全局API都在单个Vue对象上公开：

import Vue from 'vue'

Vue.nextTick(() => {})

const obj = Vue.observable({})

在3.x中，只能将它们作为命名导入进行访问：

import Vue, { nextTick, observable } from 'vue'

Vue.nextTick // undefined

nextTick(() => {})

const obj = observable({})

Affected 2.x APIs

Internal Helpers

除了公共API外，许多内部组件/帮助程序也可以作为命名导出导出。这允许编译器输出仅在使用功能时才导入功能的代码。例如以下模板

<transition>

  <div v-show="ok">hello</div>

</transition>

可以编译为以下内容（出于解释目的，而不是确切的输出）：

import { h, Transition, applyDirectives, vShow } from 'vue'

export function render() {

  return h(Transition, [

    applyDirectives(h('div', 'hello'), this, [vShow, this.ok])

  ])

}

Global API usage in plugins

2.x

const plugin = {

  install: Vue => {

    Vue.nextTick(() => {

      // ...

    })

  }

}

3.x

import { nextTick } from 'vue'

const plugin = {

  install: app => {

    nextTick(() => {

      // ...

    })

  }

}

读到这里，这篇“vue3.0的global-api-treeshaking怎么用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网JavaScript频道。