Vue3全局Api支持tree-shaking后的一些变更
Vue3全局API支持tree-shaking方法后的一些变化，即使不使用，最终也会被打包。3.x中tree-shaking支持引起的变化在Vue3中，全局和内部API已经重构以考虑tree-shaking支持。因此，全局API现在只能作为ES模块构建的命名导出来访问。//2.ximportVuefrom'vue'Vue.nextTick(()=>{//somethingrelatedtoDOM})//3.ximport{nextTick}from'vue'nextTick(()=>{//...})直接调用Vue.nextTick()将导致undefinedisnotafunction通过此更改，Vue应用程序中未使用的全局api从最终包中消除，因此最佳文件大小受到影响ApiVue.nextTickvue.observableVue.versionVue.compileVue.setvue.deleteinternalhelpers除了publicapi，很多内部组件/helpers现在也被导出为命名导出，允许编译器只有当编译器的输出是这些特性时Importingthesefeatureshello
将被编译为import{h,Transition,withDirectives,vShow}from'vueexportfunctionrender(){returnh(Transition,[withDirectives(h('div','hello'),[[vShow,this.ok]])])}这意味着只有当应用真正使用到Transition组件时才会导入上面的onlyWorkswithESModules为支持tree-shaking的绑定器构建-UMD构建仍然包括所有功能并在Vue全局变量上公开所有内容（编译器将生成适当的输出以使用全局变量之外的API，而不是不导入）。在插件中的用法//2.xconstplugin={install:Vue=>{Vue.nextTick(()=>{//...})}}//3.ximport{nextTick}from'vue'constplugin={install:app=>{nextTick(()=>{//...})}}如果使用像webpack这样的模块捆绑，这会导致Vue的源代码被捆绑到插件中，并且经常在这种情况下，这不是你所期望的。防止这种情况发生的常见做法是配置模块绑定器以从最终包中排除Vue。对于webpack，您可以使用externals配置选项：//webpack.config.jsmodule.exports={externals:{vue:'Vue'}}//这将告诉webpack将Vue模块视为外部库，而不是一个bundle如果您选择的模块绑定器恰好是Rollup，您基本上可以免费获得相同的效果，因为默认情况下Rollup将包含一个绝对模块ID（在我们的例子中为“vue”）作为外部依赖项，而不将它们包含在最终捆绑。但在绑定期间，它可能会发出“vue作为外部依赖项”警告，可以使用外部选项抑制该警告：//rollup.config.jsexportdefault{/*...*/external:['vue']}
