Vue 3即将到来-期待什么以及如何准备

There’s a lot of buzz building up toward the upcoming release of Vue 3. That made me want to help the developers’ community get ready for the next version of this popular framework. Hope you will find this post useful ❤️

即将发布的Vue 3引起了很多关注。这使我想帮助开发人员社区为该流行框架的下一个版本做好准备。 希望你会发现这篇文章有用❤️

In this post I will cover the following topics:

在这篇文章中，我将介绍以下主题：

• Why Vue 3 is so exciting
  为什么Vue 3如此令人兴奋
• Vue 3 features and changes
  Vue 3的功能和更改
• Release date explained
  发布日期说明
• Experimenting Vue 3: Important tools available
  Vue实验3：可用的重要工具
• How to prepare for migration from Vue 2
  如何为从Vue 2迁移做准备
• Learning Vue 3 — tutorials and guides
  学习Vue 3-教程和指南
• Frequently asked questions
  经常问的问题

Let’s start! 🚀

开始吧！ 🚀

Vue 3将会很棒 (Vue 3 is going to be awesome)

Vue’s popularity is growing, and the project gets faster & better with every update. Evan You announced the new Vue version in a conference in London on November 15th in 2018. The main focus of Vue 3 is making it faster, more comfortable to target native & even more user-friendly.

Vue越来越受欢迎，并且每次更新都会使项目变得更快更好。 Evan You在2018年11月15日于伦敦举行的会议上宣布了新的Vue版本。Vue 3的主要焦点是使其更快，更舒适地定位于本地用户，甚至更加用户友好 。

Among other things, there’s a new Composition API for creating components. It doesn’t introduce new concepts to Vue, but rather exposes Vue’s core capabilities like creating and observing reactive state as standalone functions. That is ultimately useful to Vue developers of all levels.

除其他外，还有一个新的Composition API用于创建组件。 它没有向Vue引入新概念，而是将Vue的核心功能(如创建和观察React性状态)作为独立功能公开。 这最终对所有级别的Vue开发人员都是有用的。

Simply put it, the Vue team is doing an intensive job of improving the framework APIs to make Vue 3:

简而言之，Vue团队正在做大量工作来改进框架API以制作Vue 3：

• Faster

  快点

• Smaller

  较小的

• More maintainable

  更易于维护

• Easier to target native

  定位到本地人更容易

• Improve developers experience

  改善开发人员体验

Can’t wait for it to be released? You can start experimenting with the alpha version of Vue 3. There’s also an initial API Reference.

等不及要发布了吗？ 您可以开始试用Vue 3的Alpha版本 。 还有一个初始API参考 。

Vue 3的功能和更改 (Vue 3 features and changes)

对Vue 3的期望-概述 (What to expect from Vue 3 — Overview)

• Composition API: This new API reminds React Hooks a bit. It’s a new syntax that allows you to use functions for organizing your code by feature instead of by object. This API will live alongside the well-known Options API of Vue 2 — It will not replace it. That means that you can continue building components the way that you’re used to with no worries. However, you can also start building with the Composition API, which provides more flexible code organization and logic reuse capabilities as well as other improvements.

  Composition API ：这个新的API有点使React Hooks变得更有趣。 这是一种新语法，可让您使用功能按功能(而不是按对象)组织代码。 该API将与Vue 2的著名Options API一起使用-不会替代它。 这意味着您可以毫无后顾之忧地继续构建组件。 但是，您也可以从Composition API开始构建，该API提供更灵活的代码组织和逻辑重用功能以及其他改进。

• TypeScript support: One of the most awaited integrations in web development. Vue 3 will have built-in TypeScript and allows you to use TS in your project optionally. Anyway, developers working with ES won’t be affected.

  TypeScript支持 ：Web开发中最期待的集成之一。 Vue 3将具有内置的TypeScript，并允许您选择在项目中使用TS。 无论如何，使用ES的开发人员将不会受到影响。

• Faster mounting and patching: Virtual DOM got a complete rewrite for faster performance. Compile-time hints have been added to reduce runtime overhead. It will help you in skipping unnecessary condition branches and avoiding re-renders. You can expect up to 100% faster component instance initialization with double the speed and half the memory usage. That’s sweet.

  更快的安装和修补 ：虚拟DOM得到了完整的重写，以实现更快的性能。 添加了编译时提示以减少运行时开销。 这将帮助您跳过不必要的条件分支并避免重新渲染。 您可以期望将组件实例的初始化速度提高100％，速度提高一倍，内存使用量减少一半。 那真好;那真甜。

• View Declaration: Vue 3 will continue to support templates as well as render functions. The main point is that Vue 3 optimized rendering speed, such as by speeding up ‘diff’ algorithms that operate behind the scenes so that Vue knows what needs to be re-rendered without interference.

  视图声明 ：Vue 3将继续支持模板以及渲染功能。 要点是Vue 3优化了渲染速度，例如通过加快在幕后运行的“差异”算法，以便Vue知道需要重新渲染哪些内容而不会产生干扰。

• It is much smaller: You will be able to shake off unused code quickly. Currently minified and compressed Vue runtime weights around 20kB (22.8kB for current 2.6.10 version). Vue 3 bundle is estimated to weigh around half of it, that’s about ~10kB!

  它要小得多 ：您将能够Swift删除未使用的代码。 当前最小化和压缩的Vue运行时权重约为20kB(当前2.6.10版本为22.8kB)。 Vue 3捆绑包估计重约一半，约为10kB！

• Native portals: now called teleport

  本地门户 ：现在称为远程传送

• Fragments: virtual elements that won’t be rendered in the DOM tree.

  片段 ：不会在DOM树中呈现的虚拟元素。

• Hooks API (still experimental)

  Hooks API (仍处于实验阶段)

• Time Slicing Support (still experimental)

  时间切片支持 (仍处于实验阶段)

有关Vue 3即将推出的功能的更多信息 (More about Vue 3 upcoming features)

We don’t want to overwhelm you with descriptions. There are tons of posts out there, and we picked only the ones that are both technical, professional, and contain practical examples:

我们不想让您不知所措。 那里有很多帖子，我们只选择了技术性，专业性且包含实际示例的帖子：

• The process: Making Vue 3 by Evan You. The latest story by the creator of Vue from May 2020.

  过程： Evan You 制作Vue 3 。 Vue创作者于2020年5月发布的最新故事。

• Exciting new features in Vue 3 by Filip Rakowski

  Filip Rakowski的 Vue 3中令人兴奋的新功能

• Vue 3 new features summary by Yanze Dai

  Vue公司3个新特性概要由Yanze戴

发布日期说明 (Release date explained)

The official release is currently planned in Q3 2020 (which is any time from now until 30.9.2020). This information is based on the official roadmap of the Vue 3 mega project.

目前计划于2020年第三季度正式发布(从现在起到2020年9月30日的任何时候)。 此信息基于Vue 3巨型项目的官方路线图 。

A screenshot from the official roadmap on GitHub

GitHub官方路线图的屏幕截图

对发布日期持乐观态度的理由🤩 (Reasons to be optimistic about the release date 🤩)

• It’s already in the release candidate (RC) stage, and it was publicly announced! This means that the API & implementation are stable, and there will be no more changes to it. During this stage, they are working on a “compat build”: a build of 3.0 that includes compatibility layers for 2.x API. This build will also ship with a flag you can turn on to emit deprecation warnings for 2.x API usage in your app. Even though the first estimations by Evan You were for 2019, they have reached such an advanced stage, which provides a reason to believe that they are highly motivated to launch within 2020.

  它已经处于发布候选(RC)阶段，并且已经公开宣布 ！ 这意味着API和实现是稳定的 ，并且不会对其进行任何更改。 在此阶段，他们正在研究“兼容版本”：3.0版本，其中包括2.x API的兼容性层。 此版本还将附带一个标志，您可以打开该标志以发出有关应用程序中2.x API使用情况的弃用警告。 即使Evan You的第一批估算是在2019年，但它们已经达到了如此先进的水平，这提供了一个理由相信他们很有动力在2020年内推出。

• Many of the most essential tools for Vue 3 are already in experimentation or public alpha phase (I will cover them in detail below).

  Vue 3的许多最重要的工具已经处于试验或公开Alpha阶段(我将在下面详细介绍)。

• The documentation for Vue 3 and a migration guide has already been published, explaining to you what’s new. Both are still in beta, but already pretty complete (and very readable & well structured, like the Vue docs have always been).

  Vue 3 的 文档 和 迁移指南 已经发布 ，向您介绍新功能。 两者都仍处于测试阶段，但已经相当完善(并且可读性强，结构合理，就像Vue文档一样)。

质疑发售日期的理由😒 (Reasons to question the release date 😒)

• At this stage, I think it is better to take this date (Q3 2020) with a grain of salt. The upcoming Vue 3 was announced a long time ago in 2018, and the release date has already been delayed many times.

  在这个阶段，我认为最好在这个日期(2020年第三季度)撒一粒盐。 即将到来的Vue 3是在2018年很久之前宣布的 ，发布日期已经被推迟了很多次。

• Additionally, the last update to the roadmap was done on June 29th. Many things could have happened since then that could affect the release date.
  此外，路线图的最新更新是在6月29日完成的。 从那以后可能发生了很多事情，这可能会影响发布日期。

In case you want to go into the details of what has been officially published, check out the full presentation about the State of Vue from April 2020 and also keep an eye on the recent changes.

如果您想了解已正式发布的内容的详细信息，请查看有关2020年4月Vue州的完整演示，并密切注意最近的更改 。

实验Vue 3：可用的重要工具 (Experimenting Vue 3: Important tools available)

• The Composition API is available now as a plugin for Vue 2 so you can try it out.

  Composition API现在作为Vue 2的插件可用，因此您可以尝试一下。

• Beta version of the new Vue Devtools

  新Vue Devtools的 Beta版

• Vue 3 official router

  Vue 3官方路由器

• Vue CLI plugin for the upcoming Vue 3 release

  即将发布的Vue 3版本的Vue CLI 插件

• Vue 3 version of Vue Test Utils

  Vue Test Utils的 Vue 3版本

如何为从Vue 2迁移做准备 (How to prepare for migration from Vue 2)

If your project is relatively small and you have been following the RFCs and avoiding to-be-deprecated functionalities, this process should be pretty quick!. Anyway, the best way would be to start by checking the migration guide. Just note that the migration guide is still in beta, and you should expect changes soon as Vue 3 will be officially released.

如果您的项目相对较小，并且您一直遵循RFC并避免了不推荐使用的功能，那么此过程应该很快！ 无论如何，最好的方法是先检查迁移指南 。 请注意，迁移指南仍处于测试阶段，您应该期待Vue 3正式发布后会有所变化。

学习Vue 3-教程和指南 (Learning Vue 3 — tutorials and guides)

• Good courses for learning Vue 3 are being offered by Vue Mastery: Recommended for advanced devs who already have prior knowledge in Vue.

  Vue Mastery提供了学习Vue 3的良好课程：推荐给已经在Vue已有知识的高级开发人员。

• New in Vue 3: A roundup of what’s new in Vue 3, including a dive into the Composition API and plenty of practical examples.

  Vue 3的新功能：Vue 3的新功能摘要，包括对Composition API的深入了解和大量实际示例。

• Vue 3 Tutorial (for Vue 2 Users): Covers much of the new stuff of Vue 3 including fragments, teleport, the Composition API, and several more obscure changes.

  Vue 3教程(适用于Vue 2用户) ：涵盖了Vue 3的许多新内容，包括片段，传送，合成API以及其他一些晦涩的更改。

• Composition API Best Practices talk from Vue.js Amsterdam 2020

  Vue.js阿姆斯特丹2020的Composition API最佳实践演讲

• Hello Vue 3: A First Look at Vue 3 & the Composition API: in this video by Dan Vega you are going to get an early look at Vue 3 and some hands-on experience using it.

  您好Vue 3：对Vue 3和Composition API的初步了解：在Dan Vega的这段视频中，您将更早地了解Vue 3以及使用它的一些动手经验。

经常问的问题 (Frequently asked questions)

我想学习Vue。 我应该从Vue 2还是Vue 3开始？ (I want to learn Vue. Should I start with Vue 2 or Vue 3?)

If you are just starting to learn the framework, it is recommended that you begin with Vue 2. The main reason is that Vue 3 does not involve dramatic re-designs, and the vast majority of your Vue 2 knowledge will still apply for Vue 3. Therefore, it doesn’t make sense to wait for the official release date of Vue 3. Start learning Vue 2, and once Vue 3 is released, you will be in the right position to catch up.

如果您刚刚开始学习框架，建议您从Vue 2开始。主要原因是Vue 3不涉及重大的重新设计，并且您的Vue 2知识中的绝大多数仍将适用于Vue 3。因此，没有必要等待Vue 3的正式发布日期。开始学习Vue 2，一旦Vue 3发布，您将处在正确的位置上。

Vue 3发行后，Vue 2.x会发生什么？ (What will happen to Vue 2.x after the release of Vue 3?)

There will be one more minor release (2.7), which will backport compatible 3.x features to 2.x.And provide deprecation warnings for 3.x changes. That will be the last minor release for 2.x and be offered as LTS (long-term support) for 18 months. It will continue to receive critical security updates even after the LTS period.

将会有一个次要版本(2.7)，它将兼容的3.x功能反向移植到2.x，并提供3.x更改的弃用警告。 这将是2.x的最后一个次要版本，并作为LTS(长期支持)提供18个月。 即使在LTS期过后，它将继续收到重要的安全更新。

我看到了一些有关Vue 3的批评家。我是否应该对此有所关注？ (I saw some critics of Vue 3. Is there something that I should be concerned about it?)

Indeed there was an active discussion around the web (mainly on Reddit) that raised serious concerns that were proven to be wrong. Among the concerns, developers claimed that Vue 3 new Composition API might not be purely additive and that the current API of Vue 2 will be deprecated. Those rumors lead people to be afraid that all the time they spent learning Vue was a complete waste of time. But again, non of this is relevant anymore. You can rest assured that the Composition API will be purely additive, and the current API will continue to be supported.

确实，网上有一个活跃的讨论(主要在Reddit上)，引起了严重的担忧，事实证明这是错误的。 在关注的问题中，开发人员声称Vue 3的新Composition API可能不是纯粹的可加性，并且不赞成使用Vue 2的当前API。 这些谣言使人们担心，他们花在学习Vue上的所有时间都是在浪费时间。 但是再次，这不再是相关的。 您可以放心，Composition API将纯粹是可加性的，并且将继续支持当前的API。

结语 (Wrap up)

That’s all for now. I hope you could find valuable resources in this post and to get a clear image of what to expect from Vue 3. It is reasonable to assume that we should all expect more news coming soon, so make sure you follow The Official Vue News site for updates.

目前为止就这样了。 我希望您可以在这篇文章中找到有价值的资源，并清楚地了解Vue 3的期望。可以合理地假设我们都应该期待更多新闻，因此请确保您关注The Official Vue News网站，以获取更多信息。更新。

This guest post is presented with ❤️ to the gitconnected community in collaboration with daily.dev. daily.dev delivers the best programming news every new tab. It will rank hundreds of qualified sources for you so that you can hack the future.

这个客户后呈现❤️到 gitconnected 社区与合作 daily.dev 。 daily.dev在每个新选项卡上均提供最佳的编程新闻。 它将为您排列数百个合格的资源，以便您可以驾驭未来。

翻译自: https://levelup.gitconnected.com/vue-3-is-coming-what-to-expect-and-how-to-prepare-dbf35c67c52d