个人理解vue中的diff算法的执行机制

概念:将前后两个模板进行对比,将差异修补的过程(patch)。

是如何比较:是对比操作前后的DOM树的每一层的节点进行对比,然后对差异进行修补后形成全新的DOM树,最后重新渲染。

为什么v-for时,常需要加上key值:vue在处理高度复用的组件时,为避免对比时出现匹配错误的情况,为每个节点添加一个唯一标识。用于diff算法对比时识别,再到对应的位置插入节点。

那么v-for添加key值的好坏处:

优:为diff算法提供标识,形成一一对应的关系,避免重复渲染和节点错乱的情况。

劣:添加key后,会不断触发diff算法,去比对新旧节点,使其性能降低。

上一篇:开发diff数据的小工具


下一篇:好家伙,你管这破玩意叫“双指针”?