Vue3学习记录——(2)虚拟DOM、事件缓存

1.Vue 2

Vue会遍历模板中的所有内容,并根据这些标签生成对应的虚拟DOM(虚拟DOM一般指采用key/value对象来保存标签元素的属性和内容),当有内容改变时,遍历虚拟DOM来找到变化前后不同的内容,这个过程叫作diff

2.Vue3重构虚拟DOM、事件缓存

  • 标记静态内容,并区分动态内容(静态提升)。
  • 更新时只diff动态的部分。

(虚拟DOM)Vue 3中首先会区分出动态内容这部分的节点,在进行diff时,只针对这些节点进行,从而减少资源浪费,提升性能。
(事件缓存)在vue2.x中在绑定DOM事件时,例如@click,这些事件被认为是动态变量,所以每次更新视图的时候都会追踪它的变化,然后每次触发都要重新生成全新的函数,在Vue 3中,提供了事件缓存对象cacheHandlers,当cacheHandlers开启的时候,@click绑定的事件会被标记成静态节点,被放入cacheHandlers中,这样在视图更新时也不会追踪,当事件再次触发时,就无须重新生成函数,直接调用缓存的事件回调方法即可,在事件处理方面提升了Vue的性能

猜你喜欢

转载自blog.csdn.net/qq812457115/article/details/129158836