Vue 3 的发布指日可待。我们可以期待一个更快、更小、更易于维护的版本,其中包含许多令人兴奋的新功能。这些主要是对现有 API 的添加和改进。

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

blacksonic/todomvc-vue-composition-api

使用 Vue 3 Composition Api 和 Vuex 构建的 TodoMVC

blacksonic/vue-3-playground

Vue 3 Playground 包含所有新功能

使用 CLI

我强烈建议将官方 CLI 用于 Vue 项目。除了开发和部署工具之外,它还简化了升级为一行命令:

vue add vue-next。

Vue Next 插件不仅升级安装了新的依赖,还修改了代码以兼容第三版。

依赖项

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

代码修改

让我们看看代码中发生了什么变化。您注意到的第一件事是主 Vue 包不再具有默认导出。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--HtGBn4Ne--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/i/nfpl02ofxn7g1lxe8d4j.jpg)

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

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KpCjhpHk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/i/vq79ud1l0gi7q6abavif.jpg)

正如您在应用程序中看到的那样,插件采用工厂模式:不再使用new关键字的构造函数。不需要调用new Vuex.Store,而是需要createStore工厂方法。不再可能将商店的默认导出作为插件传递。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--oH03tU2s--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/i/bkc40nif1sqzb5lcf1ze.jpg)

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

基本上,就是这样,应用程序可以在新的 Vue 版本上启动并运行。一切都只需一个 bash 命令。其他任何东西都应该使用旧语法,因为旧 API 仍然完好无损。

尺寸很重要

如果您检查build命令的输出大小,您会注意到略有下降:43.75 KiB -> 40.57 KiB。这是保留默认 Vue 实例以支持命名导出的结果。像 Webpack 和 Rollup 这样的构建工具可以对命名导出进行 tree-shaking(删除未使用的代码),但不能对默认导出进行。

不带 CLI

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

在线游乐场

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

总结

我们已经完成了您在升级过程中必须进行的修改。这些修改由 Vue CLI 自动完成。您现在要做的就是开始尝试 Vue 3 提供的所有新功能:新的反应系统、Composition API、Fragments、Teleport 和 Suspense。