Vue3是如何变快的?
作者:互联网
1.diff算法优化
Vue2中的虚拟dom是进行全量的对比
Vue3新增了静态标记(PatchFlag)
在与上次虚拟节点进行对比时候,只对比带有patch flash
的节点
并且可以通过flag
的信息得知当前节点要对比的具体内容
- text=1
- class=2
- style=4
- props=8
…
2.hoistStatus静态提升
Vue2中无论元素是否参与更新,每次都会重新创建,然后渲染
Vue3对于不参加更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用第一次创建的,以达到性能提升,速度变快…
3.cacheHandlers事件侦听器缓存
默认情况onClick会被视为动态绑定,所以每次都会去追踪它的变化
但是因为是统一和函数,所以没有追踪变化,直接缓存起来复用即可
4.ssr渲染
当有大量静态的内容时候,这些内容会被当做纯字符串推进一个buffer里面.即使存在动态的绑定,会通过模板插值嵌入进去.这样比通过dom来渲染的快很多.
当静态内容大到一定量级时候,会用_createStaticVNode方法在客户端去生成一个static node.这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染
标签:变快,渲染,静态,节点,如何,Vue2,Vue3,对比 来源: https://blog.csdn.net/weixin_47886687/article/details/112860410