vue3 新特性概览

之前看过尤雨溪关于VUE3介绍的一个视频直播,下面总结了一下直播里面提到的内容。

Performance 性能提升

  • 模板编译的优化;
  • 优化了Slots操作,把函数传给子组件让子组件自己决定更新哪个节点;
  • 静态内容提取,直接渲染不需要转化;
  • 重点是proxy;全语言特性支持(支持对象、数组、集合、字典的增删) proxy的模式叫 lazy by default 就是只有数据被用到的时候才会被监听,使得实例的初始化快了1倍,内存减半。 同时尽最大的努力向下兼容2.0 ;

Tree shaking support

按需引入,移除无用代码使得runtime体积更小。比如只有你使用了v-mode的时候才会引入v-mode相关的代码。体积由原来的20k可以简化到10k。

Better Typescript support

  • 全部用TS重写,对TS支持更好;
  • 内部的模块清晰的解耦,降低了阅读源码的难度 插件化设计 比如v-for、v-if等 带位置信息的parser(source map) 包括原生的Class API和TSX ;

更好的多端渲染支持Custom Renderer API

比如从runtime-core里面去自定义需要的功能,比如修改dom相关的模块,对于使用vue去开发小程序之类的用户更加友好。

响应式数据监听 API —— 封装了一个观察者对象

首先引入vue下的observable对象 把需要监听的数据传入observable,比如: const state = observable({ count:0 }) 然后每次count发生改变的时候,就可以通过一个effect方法就监听count的变化

renderTriggered 轻松排查组件更新的原因

vue组件里面写一个renderTriggered方法,然后在里面写一个debugger。这样每次组件更新之后就会把具体的信息通过event参数返回出来。 例如修改了count的值1为2。导致了组件更新,那么event里面就会有一个对象,还会告诉你具体的哪一行代码触发了这次更新。 { key:count, oldValue:1, newValue:2 }

experimental Hooks API

希望能把Hooks 以一种取代mixins的逻辑复用的机制引入到vue中

experimental Time slicing Support

因为Js的单线程机制,如果一次代码块过大的话就会发生阻塞。例如我一次渲染200个dom需要200毫秒,那么这期间,用户的点击操作里面的回调函数就不会马上被执行,页面上就能感觉到明显的卡顿。time slicing的原理就是把JS代码块切成一帧一帧的形式,比如16毫秒执行一次,这样就可以在每次执行的期间来执行用户的异步操作了。

Fragment 支持DOM的多节点

Teleport 就相当于React的Portal允许把DOM渲染的其他节点 Suspense 包裹节点实现异步等待

Composition API

写法更简洁,数据和方法都是放入到setup函数里面,并返回给setup。 思路更清晰,相同业务的代码都放到同一个函数里面。可读性更好。