VueDiff解析

    1.  根据key和选择器来判断是否需要比较,如果不是都相同,那么删除旧节点,添加新节点
    2.  如果都相同,则需要比较,进行patchVnode
        1.如果oldVnode === node 则没有变化
        2.判断是否是text节点,如果是text节点,则直接更换text值
        3.判断是否都有子节点,并且子节点不相同,进行updateChildren
        4.如果只有newVnode有子节点,那么插入子节点
        5.如果只有oldVnode有子节点,那么删除所有子节点
    上面第三步详解: 3.如果都有子节点,执行updateChildren(核心)
        有四个头尾变量    oldStartIdx newStartIdx  oldEndIdx newEndIndex
        循环进行同级比较,   
        如果没有设置key
            1.oldStartNode 与 newStartNode需要比较,
                    进行patchVnode ,startindex++
                    
            2.oldEndNode 与 newEndNode 
                    进行patchVnode      endIndex—
            3.如果oldStartVnode 与 newEndVNode相同
                那么oldStartVnode需要移动到oldEndVnode后面

            4.如果oldEndVnode 与 newStartVnode相同
                那么oldEndVnode 需要移动到oldStartVnode前面

            
        如果有设置key
            根据key查找,如果找到了就换,没有找到就插入

3.最后如果oldStartIndex > oldEndIndex 说明old先遍历完成,把newStartIndex与newEndIndex之间的所有元素当成新增的元素
如果最后newStartIndex > newEndIndex 说明new先遍历完成,把oldStartIndex与newStartIndex之间的node删除



最后再来张图

vue-diff
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 何谓人 出生为人 死去为人 如一轮苍月 寂寞的悬挂在天间 如何能被了解 这一切该如何是好 享 是非 如何归去 ...
    馒头爱吃菜包阅读 332评论 0 1
  • 想多了解一点你的我,偷偷的看了一下你以前的动态,和写的随笔!没有经过感情经历的我看到你那刻苦铭心的曾经。心里不免还...
    墨逸尘缘阅读 361评论 0 0
  • 周末,朋友相约一起聊聊接下来要怎么办; 从公司决定关掉研发中心到现在差不多2个月了,能够找到工作的陆陆续续都找到了...
    小Dew阅读 328评论 0 1