之前看过尤雨溪关于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。 思路更清晰,相同业务的代码都放到同一个函数里面。可读性更好。