虚拟Dom 发生改变
- diff 同级比较, 当前节点类型, 不同 直接替换新的。相同 下走
- 是否文本节点, 是 直接替换。不是 下走
- 新 和 旧 虚拟节点是否都有 子节点, 旧没有 新有 添加。旧 有 新没有 删除。旧 没有 新没有 不用操作。 新有 旧有 比较子节点
- 比如 列表的更新,有key属性。更准确: 比较同一节点判断 key是否相同。更快速:根据key来创建旧的儿子的index映射表
-
- 使用双指针移动来进行新老节点的对比
- 用 isSameVnode 来判断新老子节点的头头 尾尾 头尾 尾头 是否是同一节点 如果满足就进行相应的移动指针(头头 尾尾)或者移动 dom 节点(头尾 尾头)操作
- 如果全都不相等 进行暴力对比 如果找到了利用 key 和 index 的映射表来移动老的子节点到前面去 如果找不到就直接插入
- 对老的子节点进行递归 patch 处理
- 最后老的子节点有多的就删掉 新的子节点有多的就添加到相应的位置