美文网首页
vue diff算法

vue diff算法

作者: sunflower_07 | 来源:发表于2023-02-12 11:03 被阅读0次

    vue diff算法:

    为了避免不必要的渲染 按需更新 虚拟DOM会采用diff算法进行虚拟DOM节点比较 比较节点差异 从而确定需要更新的节点 再进行渲染 Vue采用的是深度优先 同层比较的策略

    新节点与旧节点的比较主要是围绕三件事达到渲染目的
    创建新节点
    删除废节点
    更新已有节点
    1.先同层级根元素比较 如果跟元素变化 那么不考虑复用 整个dom树删除重建
    先同层级根元素比较 如果根元素不变 对比出属性的变化更新 并考虑往下递归复用;

    2.对比同级兄弟元素时 , 默认按照下标进行对比复用
    对比同级兄弟元素时 如果指定了 key 就会按照相同 key 的元素来进行对比;
    diff的算法如何比较新旧虚拟dom
    1.同层级根元素先比较
    (1)如果根元素变了 删除重建doM数
    (2)如果根元素没变 对比属性 并考虑往下递归复用=
    2.兄弟元素比较
    (1)默认按照下标 进行对比复用
    (2)如果设置了key 就会按照相同key元素进行复用

    相关文章

      网友评论

          本文标题:vue diff算法

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