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的性能