前端开发那些事儿

Vue 源码-diff算法

2021-02-23  本文已影响0人  Viewwei

Vue 中如何使用虚拟 DOM 实现界面更新的?

  1. 新老节点均有children子节点,则对子节点进行diff操作,调用updateChildren
  2. 如果新节点有子节点而老节点没有子节点,先清空老节点的文本内容,然后为其新增子节点。
  3. 当新节点没有子节点而老节点有子节点的时候,则移除该节点的所有子节点。
  4. 当新老节点都无子节点的时候,只是文本的替换。
    下图展示的是updateChildren函数内部实现情况
    1.标注老的开始节点没有定义
    2,标识标识老的结束节点没有定义
    3.标注表示新的开始节点和老的开始节点一样
    4标注标识老的结束节点和新的结束节点一致
    5 标注标识老的开始节点好新的结束节点一致
    6标注表示老的结束节点和新的开始节点一致
    7 表示正常遍历


    image.png
上一篇下一篇

猜你喜欢

热点阅读