Vue 3.0 Beta来了!你还学的动么?

Vue 3.0 Beta来了

4月17日,尤雨溪微博发布Vue 3.0 beta,4 月21日,尤雨溪在B站直播分享了 Vue 3.0 Beta 版本的那些变化。本文是对其分享的简单总结。

Vue 3.0 Beta来了!你还学的动么?

GitHub 地址:

https://github.com/vuejs/vue-next#status-beta

官方库的支持状态:

Vue 3.0 Beta来了!你还学的动么?

 

六大亮点

根据线上会议的 PPT 显示,Vue 3.0 现在处于公测阶段,也就意味着所有的 RFC 已经被实现,之后的侧重点将调整为稳定性和周边库的集成。

 

Vue 3.0 Beta来了!你还学的动么?

 

1.Performance

此次 Beta 版本相较之前更多的是对性能的提升,重写了虚拟 DOM,更高效的初始化组件等,从而使 updata 的效率提高了 1.3-2 倍,SSR 的性能提升了 2-3 倍。

Vue 3.0 Beta来了!你还学的动么?

2.Tree-shaking

可以将无用模块“剪辑”,仅打包需要的(比如v-model,<transition>,用不到就不会打包)。

Vue 3.0 Beta来了!你还学的动么?

3.Composition API

Composition API 类似于 React Hooks,提高了代码逻辑的可复用性,从而实现了与模板无关性,其响应式模块还可以和其他框架组合。

Vue 3.0 Beta来了!你还学的动么?

4.Fragments

不再限制 templates 中只能有单一根节点,render 函数也可以返回数组,可以更加专注于生产。

Vue 3.0 Beta来了!你还学的动么?

Teleport

本来打算叫 Portal,对标 React,因为 Chrome 的一项提案可能出现命名冲突,遂改名。

Vue 3.0 Beta来了!你还学的动么?

Suspense

仅5%应用能感知运行时的调度差异,综合考虑下,Vue3 的<Suspense> 没和 React 一样做运行调度处理。

Vue 3.0 Beta来了!你还学的动么?

5.更好的 TypeScript 支持

在 Vue 3 内部使用 TypeScript 能够让开发人员从 Vue 的 TypeScript 定义中收益,同时还得到现代 IDE 的常见代码支持,如 Visual Studio Code / WebStorm。

Vue 3.0 Beta来了!你还学的动么?

6.Custom Renderer API

意味着以后可以通过 vue, Dom 编程的方式来进行 webgl 编程 。

感兴趣可以看这里:Getting started vugel

Vue 3.0 Beta来了!你还学的动么?

剩余工作

Vue 3.0 Beta来了!你还学的动么?

Vue 2.x还有 2.7 版本

Vue 3.0 Beta来了!你还学的动么?

上线时间

尤雨溪最后表示,目前的 Vue 3.0 Beta 已经可以投入使用,但要求开发者自己对稳定性负责。他建议生产项目暂时不要上,新的、小的项目可以试水,真正要用起码要到年终。

对于已经更新的vue3.0的版本,真的可以跟得上节奏么