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