美文网首页
Vue中的Diff算法

Vue中的Diff算法

作者: 泪滴在琴上 | 来源:发表于2021-02-08 13:16 被阅读0次

    在新老虚拟DOM对比时

    首先,对比节点本身,判断是否为同一节点,如果不为相同节点,则删除该节点重新创建节点进行替换
    如果为相同节点,进行patchVnode,判断如何对该节点的子节点进行处理,先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点,将旧的子节点移除)
    比较如果都有子节点,则进行updateChildren,判断如何对这些新老节点的子节点进行操作(diff核心)。
    匹配时,找到相同的子节点,递归比较子节点

    在diff中,只对同层的子节点进行比较,放弃跨级的节点比较,使得时间复杂从O(n^3)降低值O(n),也就是说,只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。

    相关文章

      网友评论

          本文标题:Vue中的Diff算法

          本文链接:https://www.haomeiwen.com/subject/wdgpaktx.html