vue 2.0 patchVnode 过程

76 阅读1分钟

patchVnode 主要对比以下几个方面

  1.对比新旧vnode的属性,在这过程中会更新属性,调用指令等 见下图

      

  2.对比子元素

     对比子元素主要对比以下几个方面

        新vnode 的 text存在,并且老vnode的text存在,判断是否相同,不相同直接调用nodeOps.setTextContent(elm, vnode.text)

         新的vnode的text不存在分以下几种情况对比

            新vnode 的child  和 老vnode的child 都存在  直接调用updateChildren

            新的vnode的child存在  老的vnodechild不存在 新把老的vnode text置为空,在添加 

             新的子元素  addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)

             新的vnode的child不存在  老的vnodechild存在 ,直接删除老的vnodechild                               removeVnodes(oldCh, 0, oldCh.length - 1)

             新的vnode的child不存在 老的vnodechild不存在,老的vnodechild的text存在,直                   接把老的vnode的text置空