- 概念:
概念:Diff算法是一种同层的树节点进行比较的高效算法,避免对树的逐层遍历,
减少时间复杂度。如Vue虚拟DOM渲染生成真实DOM的新旧VNode比较更新。
Diff算法的两个特点:
只会同级比较,不跨层级
Diff比较循环两边往中间收拢
- Vue DIff算法核心:
Vue的虚拟DOM核心在于patch过程:
* 首先将新旧VNode进行开始位置和结束位置的标记
* 标记好节点的位置,进行循环处理节点
* 递归处理
新旧开始指针比较
新旧结束指针比较
旧开始指针与新结束指针
旧结束指针与新开始指针
- 总结:
每次Diff都会调用updateChildren方法来比较,就这样层层递归下去,
知道将旧VNode和新VNode中所有子节点比对完。DOMDiff的过程更像是两个
树的比较,没找到相同节点时,都会一层一层的往下比较它们的子节点,是
一个深度递归遍历比较的过程。