好消息，vue3.0 进入 beta 阶段！

昨天，4 月 16 日，vue 3 正式进入 beta 阶段。同日，尤大参加了 State of Vue 的线上活动，以下是他上传到 google docs 上的 slides ：

State of Vue Apr 16 2020

可以 FQ 的同学可以直接看。如果不方便的话，可以继续往下看一下：

vue 3 核心的进度情况

进入 Beta 阶段意味着什么？

• All planned RFCs merged & implemented
• Focus is now on stability and library integrations

目前，所有被列入计划的 RFCs 已经实现了，接下来 Vue 团队的重点是让 Vue 3 变得更加稳定，以及让 vue 相关的第三方库支持 vue 3。

3.0 对比 2.x 有哪些重要变更？

• Performance
• Tree-shaking support
• Composition API
• Fragment, Teleport, Suspense
• Better TypeScript support
• Custom Renderer API

主要体现在 性能、Tree-shaking support 、Composition API 、 Fragment 、TypeScript支持度 和 自定义 Render 上。

性能

• Rewritten virtual dom implementation
• Compiler-informed fast paths
• More efficient component initialization
• 1.3~2x better update performance*
• 2~3x faster SSR*

性能上，主要是 重写了Vdom , compiler-informed fast paths（编译模板的优化？）， 以及实现了更加高效的组件初始化。

Tree-shaking support

• Most optional features (e.g. v-model, ) are now tree-shakable
• Bare-bone HelloWorld size: 13.5kb
• 11.75kb with only Composition API support
• All runtime features included: 22.5kb
• More features but still lighter than Vue 2

这部分的优化主要是减少了 vue 的打包体积。很多时候，我们的应用并不是需要 vue 提供的所有功能的，在 vue 2 我们没有很好的办法把这些不想要的功能排除掉，但是 3.0 我们就做成了按需引入。举例来说，内置组件像 keep-alive、transition，指令的配合的运行时比如 v-model、v-for 等都可以按需引入 。这样就可以让纯净的 vue 的体积变得更小了。

Composition API

• Usable alongside existing Options API
• Flexible logic composition and reuse
• Reactivity module can be used as a standalone library

Composition API 是和 React Hooks 类似的东西，他们的主要作用是提高了代码逻辑的可复用性，从而实现了与模板无关性。另外，把 Reactivity 模块独立开来，意味着 vue 3 的响应式模块可以和其他框架组合。之前昊神就发过一篇文章 40行代码把Vue3的响应式集成进React做状态管理 有兴趣的可以去看一下。

Fragments

• No longer limited to a single root node in templates
• Manual render functions can simply return Arrays
• “Just works”

不再限制 tmeplate 里面只有一个根节点了，render 函数也可以返回数组了，有点类似实现了 React.Fragments 的功能 。

• Previously known as
• More details to be shared by @Linusborg

• Wait on nested async dependencies in a nested tree
• Works with async setup()
• Works with Async Components

Better TypeScript Support

• Codebase written in TS w/ auto-generated type definitions
• API is the same in JS and TS
• In fact, code will also be largely the same
• TSX support
• Class component is still supported (vue-class-component@next is currently in alpha)

对 TS 及 TSX的支持度更加友好了。类组件还会继续支持，但是需要引入 vue-class-component@next，该模块目前还处在 alpha 阶段。

Custom Renderer API

• NativeScript Vue integration underway by @rigor789
• Users already experimenting w/ WebGL custom renderer that can be used alongside a normal Vue application (Vugel)

这是个振奋人心的消息，意味着以后我们可以通过 vue ，实现用 dom 编程的方式来进行 webgl 编程 。感兴趣可以看这里：Getting started vugel

vue 3 生态的进度情况

文档和迁移指引进度

• New Docs under heavy work by @NataliaTepluhina, @sdras, @bencodezen & @phanan
• @sdras starting to work on Migration Guide
• @sodatea has started working on CodeMods

vue-router

• vue-router@next is currently in alpha, thanks to work by @posva

Vuex

• vuex@next (same API but with Vue 3 compat) currently in alpha, thanks to work by @KiaKing
• Team is experimenting with Vuex API simplification for the next iteration

vue-cli

• Experimental Support via vue-cli-plugin-vue-next by @sodatea
• (wip) CodeMods support for upgrading Vue 2 applications

vue-test-utils

• test-utils@next being worked on by @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs

DevTools

• Early prototype already working by @Akryum, full integration will be worked on as we reach beta

IDE Support (Vetur)

• @znck currently experimenting with Type checking for templates
• @octref will be working on Vetur integration for Vue 3 in May

Nuxt

• Nuxt team is working on Vue 3 integration and already has working prototype.

What About 2.x?

• There will be one last minor release (2.7)
• Backporting compatible improvements from 3.0
• Deprecation warnings for features removed in 3.0
• LTS for 18 months

可见，vue 2 并没有过时， 还会有小更新，并且还会维护 18 个月。

总结

虽然 vue 3 已经进入 beta 阶段，但是距离能应用到生产环境还是有很长的路要走，最起码，在 2020 年 继续使用 vue 2 也不会过时，最主要的原因是 vue 3 生态还没有完善。就像 python3 出来那么久了，现在还有很多人使用 python2 一样，因为还有很多 python 的库不兼容 python3 的。