昨天,4 月 16 日,vue 3 正式进入 beta 阶段。同日,尤大参加了 State of Vue 的线上活动,以下是他上传到 google docs 上的 slides
:
可以 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
的功能 。
<Teleport>
- Previously known as
- More details to be shared by @Linusborg
<Suspense>
- 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 的。