vue 虚拟dom的patch源码分析


Posted in Javascript onMarch 01, 2018

本文介绍了vue 虚拟dom的patch源码分析,分享给大家,具体如下:

源码目录:src/core/vdom/patch.js

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  let oldStartIdx = 0
  let newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let oldStartVnode = oldCh[0]
  let oldEndVnode = oldCh[oldEndIdx]
  let newEndIdx = newCh.length - 1
  let newStartVnode = newCh[0]
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm

    const canMove = !removeOnly

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { // 开始索引大于结束索引,进不了
   if (isUndef(oldStartVnode)) {
    oldStartVnode = oldCh[++oldStartIdx] // Vnode已经被移走了。
   } else if (isUndef(oldEndVnode)) {
    oldEndVnode = oldCh[--oldEndIdx]
   } else if (sameVnode(oldStartVnode, newStartVnode)) {
    patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
    oldStartVnode = oldCh[++oldStartIdx] // 索引加1。是去对比下一个节点。比如之前start=a[0],那现在start=a[1],改变start的值后再去对比start这个vnode
    newStartVnode = newCh[++newStartIdx]
     
   } else if (sameVnode(oldEndVnode, newEndVnode)) { 
    patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
    oldEndVnode = oldCh[--oldEndIdx]
    newEndVnode = newCh[--newEndIdx]
   } else if (sameVnode(oldStartVnode, newEndVnode)) { 
    patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))// 把节点b移到树的最右边
    oldStartVnode = oldCh[++oldStartIdx]
    newEndVnode = newCh[--newEndIdx]
     
   } else if (sameVnode(oldEndVnode, newStartVnode)) {  old.end.d=new.start.d
    patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)// Vnode moved left,把d移到c的左边。=old.start->old.end
    oldEndVnode = oldCh[--oldEndIdx] 
    newStartVnode = newCh[++newStartIdx] 

   } else {
    if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
    idxInOld = isDef(newStartVnode.key)
     ? oldKeyToIdx[newStartVnode.key]
     : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
    if (isUndef(idxInOld)) { 
     createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm) // 创建新节点,后面执行了nodeOps.insertBefore(parent, elm, ref)
    } else {
     vnodeToMove = oldCh[idxInOld]
     /* istanbul ignore if */
     if (process.env.NODE_ENV !== 'production' && !vnodeToMove) {
      warn(
       'It seems there are duplicate keys that is causing an update error. ' +
       'Make sure each v-for item has a unique key.'
      )
     }
     if (sameVnode(vnodeToMove, newStartVnode)) {
      patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
      oldCh[idxInOld] = undefined
      canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
     } else {
      // same key but different element. treat as new element
      createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
     }
    }
    newStartVnode = newCh[++newStartIdx] 
   
   }
  }
  if (oldStartIdx > oldEndIdx) {
   refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
   addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  } else if (newStartIdx > newEndIdx) {
   removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx) // 删除旧的c,removeNode(ch.elm)

  }
 }
function sameVnode (a, b) {
 return (
  a.key === b.key && (
   (
    a.tag === b.tag &&
    a.isComment === b.isComment &&
    isDef(a.data) === isDef(b.data) &&
    sameInputType(a, b)
   ) || (
    isTrue(a.isAsyncPlaceholder) &&
    a.asyncFactory === b.asyncFactory &&
    isUndef(b.asyncFactory.error)
   )
  )
 )
}

/**
   * 比较新旧vnode节点,根据不同的状态对dom做合理的更新操作(添加,移动,删除)整个过程还会依次调用prepatch,update,postpatch等钩子函数,在编译阶段生成的一些静态子树,在这个过程
   * @param oldVnode 中由于不会改变而直接跳过比对,动态子树在比较过程中比较核心的部分就是当新旧vnode同时存在children,通过updateChildren方法对子节点做更新,
   * @param vnode
   * @param insertedVnodeQueue
   * @param removeOnly
   */
 function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
  if (oldVnode === vnode) {
   return
  }

  const elm = vnode.elm = oldVnode.elm

  if (isTrue(oldVnode.isAsyncPlaceholder)) {
   if (isDef(vnode.asyncFactory.resolved)) {
    hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
   } else {
    vnode.isAsyncPlaceholder = true
   }
   return
  }

   // 用于静态树的重用元素。
    // 注意,如果vnode是克隆的,我们只做这个。
    // 如果新节点不是克隆的,则表示呈现函数。
    // 由热重加载api重新设置,我们需要进行适当的重新渲染。
  if (isTrue(vnode.isStatic) &&
   isTrue(oldVnode.isStatic) &&
   vnode.key === oldVnode.key &&
   (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  ) {
   vnode.componentInstance = oldVnode.componentInstance
   return
  }

  let i
  const data = vnode.data
  if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
   i(oldVnode, vnode)
  }

  const oldCh = oldVnode.children
  const ch = vnode.children
  if (isDef(data) && isPatchable(vnode)) {
   for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
   if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
  }
  if (isUndef(vnode.text)) {
   if (isDef(oldCh) && isDef(ch)) {
    if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
   } else if (isDef(ch)) {
    if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
    addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
   } else if (isDef(oldCh)) {
    removeVnodes(elm, oldCh, 0, oldCh.length - 1)
   } else if (isDef(oldVnode.text)) {
    nodeOps.setTextContent(elm, '')
   }
  } else if (oldVnode.text !== vnode.text) {
   nodeOps.setTextContent(elm, vnode.text)
  }
  if (isDef(data)) {
   if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
  }
 }

function insertBefore (parentNode, newNode, referenceNode) {
 parentNode.insertBefore(newNode, referenceNode);
}

/**
   *
   * @param vnode根据vnode的数据结构创建真实的dom节点,如果vnode有children则会遍历这些子节点,递归调用createElm方法,
   * @param insertedVnodeQueue记录子节点创建顺序的队列,每创建一个dom元素就会往队列中插入当前的vnode,当整个vnode对象全部转换成为真实的dom 树时,会依次调用这个队列中vnode hook的insert方法
   * @param parentElm
   * @param refElm
   * @param nested
   */

   let inPre = 0
 function createElm (vnode, insertedVnodeQueue, parentElm, refElm, nested) {
  vnode.isRootInsert = !nested // 过渡进入检查
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
   return
  }

  const data = vnode.data
  const children = vnode.children
  const tag = vnode.tag
  if (isDef(tag)) {
   if (process.env.NODE_ENV !== 'production') {
    if (data && data.pre) {
     inPre++
    }
    if (
     !inPre &&
     !vnode.ns &&
     !(
      config.ignoredElements.length &&
      config.ignoredElements.some(ignore => {
       return isRegExp(ignore)
        ? ignore.test(tag)
        : ignore === tag
      })
     ) &&
     config.isUnknownElement(tag)
    ) {
     warn(
      'Unknown custom element: <' + tag + '> - did you ' +
      'register the component correctly? For recursive components, ' +
      'make sure to provide the "name" option.',
      vnode.context
     )
    }
   }
   vnode.elm = vnode.ns
    ? nodeOps.createElementNS(vnode.ns, tag)
    : nodeOps.createElement(tag, vnode)
   setScope(vnode)

   /* istanbul ignore if */
   if (__WEEX__) {
    // in Weex, the default insertion order is parent-first.
    // List items can be optimized to use children-first insertion
    // with append="tree".
    const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
    if (!appendAsTree) {
     if (isDef(data)) {
      invokeCreateHooks(vnode, insertedVnodeQueue)
     }
     insert(parentElm, vnode.elm, refElm)
    }
    createChildren(vnode, children, insertedVnodeQueue)
    if (appendAsTree) {
     if (isDef(data)) {
      invokeCreateHooks(vnode, insertedVnodeQueue)
     }
     insert(parentElm, vnode.elm, refElm)
    }
   } else {
    createChildren(vnode, children, insertedVnodeQueue)
    if (isDef(data)) {
     invokeCreateHooks(vnode, insertedVnodeQueue)
    }
    insert(parentElm, vnode.elm, refElm)
   }

   if (process.env.NODE_ENV !== 'production' && data && data.pre) {
    inPre--
   }
  } else if (isTrue(vnode.isComment)) {
   vnode.elm = nodeOps.createComment(vnode.text)
   insert(parentElm, vnode.elm, refElm)
  } else {
   vnode.elm = nodeOps.createTextNode(vnode.text)
   insert(parentElm, vnode.elm, refElm)
  }
 }
function insert (parent, elm, ref) {
  if (isDef(parent)) {
   if (isDef(ref)) {
    if (ref.parentNode === parent) {
     nodeOps.insertBefore(parent, elm, ref)
    }
   } else {
    nodeOps.appendChild(parent, elm)
   }
  }
 }

function removeVnodes (parentElm, vnodes, startIdx, endIdx) {
  for (; startIdx <= endIdx; ++startIdx) {
   const ch = vnodes[startIdx]
   if (isDef(ch)) {
    if (isDef(ch.tag)) {
     removeAndInvokeRemoveHook(ch)
     invokeDestroyHook(ch)
    } else { // Text node
     removeNode(ch.elm)
    }
   }
  }
 }

updateChildren方法主要通过while循环去对比2棵树的子节点来更新dom,通过对比新的来改变旧的,以达到新旧统一的目的。

通过一个例子来模拟一下:

假设有新旧2棵树,树中的子节点分别为a,b,c,d等表示,不同的代号代表不同的vnode,如:

vue 虚拟dom的patch源码分析

在设置好状态后,我们开始第一遍比较,此时oldStartVnode=a,newStartVnode=a;命中了sameVnode(oldStartVnode,newStartVnode)逻辑,则直接调用patchVnode(oldStartVnode,newStartVnode,insertedVnodeQueue)方法更新节点a,接着把oldStartIdxnewStartIdx索引分别+1,如图:

vue 虚拟dom的patch源码分析

更新完节点a后,我们开始第2遍比较,此时oldStartVnode=b,newEndVnode=b;命中了sameVnode(oldStartVnode,newEndVnode)逻辑,则调用patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)方法更新节点b,接着调用canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm)),把节点b移到树的最右边,最后把oldStartIdx索引+1,newEndIdx索引-1,如图:

vue 虚拟dom的patch源码分析

更新完节点b后,我们开始第三遍比较,此时oldEndVnode=d,newStartVnode=d;命中了sameVnode(oldEndVnode, newStartVnode)逻辑,则调用patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)方法更新节点d,接着调用canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm),把d移到c的左边。最后把oldEndIdx索引-1,newStartIdx索引+1,如图:

vue 虚拟dom的patch源码分析

更新完d后,我们开始第4遍比较,此时newStartVnode=e,节点e在旧树里是没有的,因此应该被作为一个新的元素插入,调用createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm),后面执行了nodeOps.insertBefore(parent, elm, ref)方法把e插入到c之前,接着把newStartIdx索引+1,如图:

vue 虚拟dom的patch源码分析

插入节点e后,我们可以看到newStartIdx已经大于newEndIdx了,while循环已经完毕。接着调用removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx) 删除旧的c,最终如图:

vue 虚拟dom的patch源码分析

updateChildren通过以上几步操作完成了旧树子节点的更新,实际上只用了比较小的dom操作,在性能上有所提升,并且当子节点越复杂,这种提升效果越明显。vnode通过patch方法生成dom后,会调用mounted hook,至此,整个vue实例就创建完成了,当这个vue实例的watcher观察到数据变化时,会两次调用render方法生成新的vnode,接着调用patch方法对比新旧vnode来更新dom.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 #Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 #Javascript
React Native 图片查看组件的方法
Mar 01 #Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 #Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 #Javascript
vue中使用cropperjs的方法
Mar 01 #Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 #Javascript
You might like
PHPCMS的使用小结
2010/09/20 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
js实现转动骰子模型
2019/10/24 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
python实现单链表的方法示例
2019/09/03 Python
Python for循环及基础用法详解
2019/11/08 Python
戴森英国官网:Dyson英国
2019/05/07 全球购物
办公室主任先进事迹
2014/01/18 职场文书
小学老师对学生的评语
2014/12/29 职场文书
岳麓书院导游词
2015/02/03 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
2016教师国培研修感言
2015/12/08 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书