Vue 3 升级指南

Vue 3 即将发布。我们期待一个速度更快、体积更小、更易于维护的版本，其中包含许多激动人心的新功能。这些功能主要基于现有 API 进行补充和改进。

没有什么能阻止你使用 Vue 3 启动你的新应用程序。在本文中，我将向你展示如何领先一步，通过升级你的应用程序来尝试新的 API。如果你对升级的应用程序感兴趣，可以看看我用 Composition API 编写的 TodoMVC 应用程序，或者查看包含所有新功能的 Playground。

使用 CLI

我强烈建议使用官方 CLI 来管理 Vue 项目。除了开发和部署工具之外，它还能将升级简化为一行命令
vue add vue-next：

Vue Next 插件不仅升级并安装了新的依赖项，还修改了代码以兼容版本 3。

依赖项

安装插件会将软件包vue、vuex、vue-router和升级到下一个主要版本。此外，开发依赖项中还会出现一个名为 的新软件包。它有什么用处？它将新的 Vue 单文件组件编译成可运行的 JavaScript 代码eslint-plugin-vue。@vue/test-utils@vue/compiler-sfc

代码修改

让我们看看代码中发生了什么变化。首先注意到的是，主 Vue 包不再具有默认导出。

命名导出createApp会创建一个新的 Vue 应用程序，就像 Vue 2 中的构造函数一样。插件设置转移到应用程序实例，并使用use方法而不是构造函数的参数。$mount方法失去了美元符号，但行为相同。

正如您在应用程序中看到的，插件采用了工厂模式：不再使用带有 关键字的构造函数。我们需要使用工厂方法，new而不是调用。此外，我们无法再将商店的默认导出作为插件传递。new Vuex.StorecreateStore

路由器插件遵循相同的模式：new VueRouter变为对 的调用createRouter，并且必须保留全局插件设置。在新版本中，您始终必须定义历史记录的类型。您可以选择createWebHashHistory、createMemoryHistory和createWebHistory。

基本上就是这样，应用程序可以在新版 Vue 上启动并运行。所有操作只需一个 bash 命令即可完成。其他操作应该可以使用旧语法，因为旧 API 仍然完好无损。

尺寸很重要

如果您检查命令的输出大小build，会注意到略有下降：43.75 KiB -> 40.57 KiB。这是因为保留了默认的 Vue 实例，转而使用命名导出的结果。Webpack 和 Rollup 等构建工具可以对命名导出进行 tree-shaking（移除未使用的代码），但不能对默认导出进行 tree-shaking。

没有 CLI

如果没有 CLI，您必须升级vue-loader到rollup-plugin-vue下一个主要版本并添加@vue/compiler-sfc软件包。这里不再有魔法，您必须手动完成所有操作。您还必须手动修改代码，而且这里没有搜索代码库和更新语法的工具。

网上游乐场

如果您不想修改您的项目但有兴趣尝试新版本，请尝试这个在线游乐场。

概括

升级过程中需要修改的部分已经全部完成了。这些修改将由 Vue CLI 自动完成。现在，您只需开始体验 Vue 3 提供的所有新功能：新的响应式系统、Composition API、Fragments、Teleport 和 Suspense。