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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
基于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
php操作excel文件 基于phpexcel
2010/07/02 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
超级退弹代码
2008/07/07 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python群发邮件实例代码
2014/01/03 Python
python基础教程之Hello World!
2014/08/29 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
爱的奉献演讲稿
2014/09/10 职场文书
2014年林业工作总结
2014/12/05 职场文书
邀请函怎么写
2015/01/30 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏