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

栏目: IT技术 · 发布时间: 4年前

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

好消息,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 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 生态还没有完善。就像 python 3 出来那么久了,现在还有很多人使用 python2 一样,因为还有很多 python 的库不兼容 python3 的。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

高性能网站建设指南(第二版)

高性能网站建设指南(第二版)

Steve Souders / 刘彦博 / 电子工业出版社 / 2015-5 / 55.00元

《高性能网站建设指南:前端工程师技能精髓》结合Web 2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、JavaScript、Flash和图片处理等要素的技术,全面涵盖浏览器端性能问题的方方面面。在《高性能网站建设指南:前端工程师技能精髓》中,作者给出了14条具体的优化......一起来看看 《高性能网站建设指南(第二版)》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换