阅读 6737

好消息,vue 3 进入 beta 阶段!

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

State of Vue Apr 16 2020

能科学上网的可以直接打开以上链接查看。如果不方便的话,可以继续往下看:

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 supportComposition APIFragmentTypeScript支持度自定义 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, <transition>) 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 <Portal>
  • 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 的。