企业手机网站建,工业设计大学排名前50,wordpress建站落后吗,建材公司网站建设方案引言#xff1a;
上一节说了key的用途#xff0c;而这个key属性#xff0c;在vue的vnode 中至关重要#xff0c;直接影响了虚拟DOM的更新机制#xff1b;
什么场景中会用到diff算法 如#xff1a;修改响应式属性需要重新渲染页面#xff0c;会重新执行render渲染函数返…引言
上一节说了key的用途而这个key属性在vue的vnode 中至关重要直接影响了虚拟DOM的更新机制
什么场景中会用到diff算法 如修改响应式属性需要重新渲染页面会重新执行render渲染函数返回新虚拟DOM拿到新的虚拟DOM后需要进行patch对比新旧虚拟DOM在对比双方的子级节点需要拿旧的虚拟DOM的子级和新的虚拟DOM子级进行patchChildren比较双方子级元素的差异并且双方子级都为数组的情况下具有多个子级节点就会使用到diff算法
为什么要用diff算法呢提高性能、提升加载渲染速度、最大限度的复用原DOM 主要为了对比对新旧Vnode的差异将相同的节点数据复用只找新增、修改的虚拟DOM进行创建并插入**提高性能元素发生位置变化时只需要找出哪些元素需要移动减少元素移动次数** 若不比较新旧节点则每次更新都先对旧节点进行卸载再重新挂载新节点都需要先根据标签名创建真实节点再进行挂载这样每次卸载或挂载都会造成页面重排重绘造成性能浪费
vue3里面的DIFF
Vue3 引入了一个全新的编译策略和运行时优化包括对 Diff 算法的改进。Vue3 的 Diff 算法带来了更好的性能和更少的内存消耗主要得益于以下几点
支持碎片化(Fragment)Vue3支持碎片化即允许组件有多个根节点这在Vue2中是只允许一个根节点。 静态节点提升Vue3在编译时会对静态节点进行提升这些节点在更新时不会被重新创建而是直接复用从而减少渲染成本。 区块树(Block Tree)Vue3引入了区块树概念它可以跳过静态内容快速定位到动态节点减少的对比次数。 编译时优化Vue3在编译时会对模板进行静态提升将不会变化的节点和属性提取出来避免在每次渲染时都重新创建。 双端比较优化Vue3继续使用了双端比较算法但是采用的是Map 数据结构在细节上进行了优化比如对于相同节点的处理更加高效。
Vue2 里面的 DIFF
Vue2 中的 Diff 算法主要关注子节点的列表差异。它通过同级比较来工作对新旧节点列表进行遍历比较每个节点是否相同然后根据需要进行创建、更新或移除操作。
同级比较只比较同一层级的节点不跨层级比较。 双端比较Vue2 的 Diff 算法采用双端比较策略从列表的两端头部和尾部开始比较以尽量减少节点的移动次数通过splice函数进行数组操作重写了数组的7中操作方法有局限性。 更新策略当头尾比较无法匹配时Vue2 会尝试复用旧节点通过更新节点的属性或子节点来匹配新的虚拟节点同时将其移动到正确的位置以减少 DOM 操作次数。
Vue2 的 Diff 算法有一些限制比如
同级比较不会进行跨层级的节点比较这可能导致一些不必要的DOM操作。 静态节点优化对于静态节点Vue2在构建虚拟DOM树时会有一些优化但在更新时这些优化不会重复利用。
最后 Vue3 的 Diff 算法在 Vue2 的基础上进行了多项优化使得虚拟 DOM 的更新更加快速和高效。这些优化包括更高效的节点比较、静态节点提升、块树优化等这些改进有助于减少渲染时间提高应用的性能。 主要有以下5种特性
