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。
思路更清晰,相同业务的代码都放到同一个函数里面。可读性更好。

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

电子邮件地址不会被公开。 必填项已用*标注

浏览量:31 次浏览