最全的Vue3.0新特性预览（翻译）

前言

Evan You（尤雨溪）在2018年11月16日早上在 Vue Toronto 的主题演讲中预演了 Vue 3.0的新特性 。利用现代浏览器支持的新功能，Vue 3 将成为咱们已经了解和喜好的 Vue.js 强大的的改进版本。

大概能够分为：

• 更快
• 更小
• 更易于维护
• 更多的原生支持
• 更易于开发使用

完整的PPT请点击：跳转

翻译

更快

一、虚拟 DOM 重写，mounting和patching的速度提升100％

二、更多的编译时的提示来减小运行时的开销

三、组件快速路径+单个调用+子类型检测

• 跳过没必要要的条件分支
• JS引擎更容易优化

四、优化插槽的生成

• 确保实例正确的跟踪依赖关系
• 避免没必要要的父子组件从新渲染

五、静态树提高

• 跳过修补整棵树，从而下降渲染成本
• 即便屡次出现也能正常工做

六、静态属性提高

• 跳过不会改变节点的修补过程，可是它的子组件会保持修补过程

七、内联的事件提高

• 避免由于不一样的内联函数标识而致使的没必要要的从新渲染

八、基于Proxy的观察者机制，全语言覆盖+更好的性能

• 目前vue使用的是Object.defineProperty 的 getter 和 setter
• 组件实例初始化的速度提升100％
• 使用Proxy节省之前一半的内存开销，加快速度，可是存在低浏览器版本的不兼容
• 为了继续支持 IE11，Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建

更小

• 更友好的tree-shaking
• 新的core runtime 压缩后大概 10kb

更加可维护

• Flow -> TypeScript
• 包的解耦
• 编译器重写
  • 可插拔的架构
  • 提供更强大的IDE支持来做为基础设施

提供更方便的原生支持

运行时内核也将与平台无关，使得 Vue 能够更容易地与任何平台（例如Web，iOS或Android）一块儿使用

更方便的开发

• 暴露响应式的api

• 轻松识别组件从新渲染的缘由

• 提供对TypeScript的支持（TSX）

• 更友好的warning traces

  • 如今包括功能组件
  • 可检查的props
  • 在更多的警告中提供可用的traces

实验性的 Hooks API

相似react hook的API，详情能够见

实验性的 Time Slicing 支持

当许多组件同时尝试从新渲染时,浏览器都会变得很慢，利用Time Slicing将JS执行分为几部分,此时，用户的交互不会被阻塞

参考

www.css88.com/archives/10…

最后

推荐一下本身的我的公众号：前端精读（每日定时推送一篇前端好文）