21

好消息,vue3.0 进入 beta 阶段!

 4 years ago
source link: http://www.cnblogs.com/yugege/p/12721343.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

IbqY7ji.png!web

昨天,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 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, ) 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 的。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK