资讯专栏INFORMATION COLUMN

vue:虚拟dom的patch

Euphoria / 1550人阅读

摘要:如果新节点不是克隆的,则表示呈现函数。由热重加载重新设置,我们需要进行适当的重新渲染。接着调用删除旧的最终如图通过以上几步操作完成了旧树子节点的更新,实际上只用了比较小的操作,在性能上有所提升,并且当子节点越复杂,这种提升效果越明显。

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

</>复制代码

  1. function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  2. let oldStartIdx = 0
  3. let newStartIdx = 0
  4. let oldEndIdx = oldCh.length - 1
  5. let oldStartVnode = oldCh[0]
  6. let oldEndVnode = oldCh[oldEndIdx]
  7. let newEndIdx = newCh.length - 1
  8. let newStartVnode = newCh[0]
  9. let newEndVnode = newCh[newEndIdx]
  10. let oldKeyToIdx, idxInOld, vnodeToMove, refElm
  11. const canMove = !removeOnly
  12. while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { // 开始索引大于结束索引,进不了
  13. if (isUndef(oldStartVnode)) {
  14. oldStartVnode = oldCh[++oldStartIdx] // Vnode已经被移走了。
  15. } else if (isUndef(oldEndVnode)) {
  16. oldEndVnode = oldCh[--oldEndIdx]
  17. } else if (sameVnode(oldStartVnode, newStartVnode)) {
  18. patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
  19. oldStartVnode = oldCh[++oldStartIdx] // 索引加1。是去对比下一个节点。比如之前start=a[0],那现在start=a[1],改变start的值后再去对比start这个vnode
  20. newStartVnode = newCh[++newStartIdx]
  21. } else if (sameVnode(oldEndVnode, newEndVnode)) {
  22. patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
  23. oldEndVnode = oldCh[--oldEndIdx]
  24. newEndVnode = newCh[--newEndIdx]
  25. } else if (sameVnode(oldStartVnode, newEndVnode)) {
  26. patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
  27. canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))// 把节点b移到树的最右边
  28. oldStartVnode = oldCh[++oldStartIdx]
  29. newEndVnode = newCh[--newEndIdx]
  30. } else if (sameVnode(oldEndVnode, newStartVnode)) { old.end.d=new.start.d
  31. patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
  32. canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)// Vnode moved left,把d移到c的左边。=old.start->old.end
  33. oldEndVnode = oldCh[--oldEndIdx]
  34. newStartVnode = newCh[++newStartIdx]
  35. } else {
  36. if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
  37. idxInOld = isDef(newStartVnode.key)
  38. ? oldKeyToIdx[newStartVnode.key]
  39. : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
  40. if (isUndef(idxInOld)) {
  41. createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm) // 创建新节点,后面执行了nodeOps.insertBefore(parent, elm, ref)
  42. } else {
  43. vnodeToMove = oldCh[idxInOld]
  44. /* istanbul ignore if */
  45. if (process.env.NODE_ENV !== "production" && !vnodeToMove) {
  46. warn(
  47. "It seems there are duplicate keys that is causing an update error. " +
  48. "Make sure each v-for item has a unique key."
  49. )
  50. }
  51. if (sameVnode(vnodeToMove, newStartVnode)) {
  52. patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
  53. oldCh[idxInOld] = undefined
  54. canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
  55. } else {
  56. // same key but different element. treat as new element
  57. createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
  58. }
  59. }
  60. newStartVnode = newCh[++newStartIdx]
  61. }
  62. }
  63. if (oldStartIdx > oldEndIdx) {
  64. refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
  65. addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  66. } else if (newStartIdx > newEndIdx) {
  67. removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx) // 删除旧的c,removeNode(ch.elm)
  68. }
  69. }

</>复制代码

  1. function sameVnode (a, b) {
  2. return (
  3. a.key === b.key && (
  4. (
  5. a.tag === b.tag &&
  6. a.isComment === b.isComment &&
  7. isDef(a.data) === isDef(b.data) &&
  8. sameInputType(a, b)
  9. ) || (
  10. isTrue(a.isAsyncPlaceholder) &&
  11. a.asyncFactory === b.asyncFactory &&
  12. isUndef(b.asyncFactory.error)
  13. )
  14. )
  15. )
  16. }
  17. /**
  18. * 比较新旧vnode节点,根据不同的状态对dom做合理的更新操作(添加,移动,删除)整个过程还会依次调用prepatch,update,postpatch等钩子函数,在编译阶段生成的一些静态子树,在这个过程
  19. * @param oldVnode 中由于不会改变而直接跳过比对,动态子树在比较过程中比较核心的部分就是当新旧vnode同时存在children,通过updateChildren方法对子节点做更新,
  20. * @param vnode
  21. * @param insertedVnodeQueue
  22. * @param removeOnly
  23. */
  24. function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
  25. if (oldVnode === vnode) {
  26. return
  27. }
  28. const elm = vnode.elm = oldVnode.elm
  29. if (isTrue(oldVnode.isAsyncPlaceholder)) {
  30. if (isDef(vnode.asyncFactory.resolved)) {
  31. hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
  32. } else {
  33. vnode.isAsyncPlaceholder = true
  34. }
  35. return
  36. }
  37. // 用于静态树的重用元素。
  38. // 注意,如果vnode是克隆的,我们只做这个。
  39. // 如果新节点不是克隆的,则表示呈现函数。
  40. // 由热重加载api重新设置,我们需要进行适当的重新渲染。
  41. if (isTrue(vnode.isStatic) &&
  42. isTrue(oldVnode.isStatic) &&
  43. vnode.key === oldVnode.key &&
  44. (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  45. ) {
  46. vnode.componentInstance = oldVnode.componentInstance
  47. return
  48. }
  49. let i
  50. const data = vnode.data
  51. if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
  52. i(oldVnode, vnode)
  53. }
  54. const oldCh = oldVnode.children
  55. const ch = vnode.children
  56. if (isDef(data) && isPatchable(vnode)) {
  57. for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
  58. if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
  59. }
  60. if (isUndef(vnode.text)) {
  61. if (isDef(oldCh) && isDef(ch)) {
  62. if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
  63. } else if (isDef(ch)) {
  64. if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, "")
  65. addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
  66. } else if (isDef(oldCh)) {
  67. removeVnodes(elm, oldCh, 0, oldCh.length - 1)
  68. } else if (isDef(oldVnode.text)) {
  69. nodeOps.setTextContent(elm, "")
  70. }
  71. } else if (oldVnode.text !== vnode.text) {
  72. nodeOps.setTextContent(elm, vnode.text)
  73. }
  74. if (isDef(data)) {
  75. if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
  76. }
  77. }
  78. function insertBefore (parentNode, newNode, referenceNode) {
  79. parentNode.insertBefore(newNode, referenceNode);
  80. }
  81. /**
  82. *
  83. * @param vnode根据vnode的数据结构创建真实的dom节点,如果vnode有children则会遍历这些子节点,递归调用createElm方法,
  84. * @param insertedVnodeQueue记录子节点创建顺序的队列,每创建一个dom元素就会往队列中插入当前的vnode,当整个vnode对象全部转换成为真实的dom 树时,会依次调用这个队列中vnode hook的insert方法
  85. * @param parentElm
  86. * @param refElm
  87. * @param nested
  88. */
  89. let inPre = 0
  90. function createElm (vnode, insertedVnodeQueue, parentElm, refElm, nested) {
  91. vnode.isRootInsert = !nested // 过渡进入检查
  92. if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
  93. return
  94. }
  95. const data = vnode.data
  96. const children = vnode.children
  97. const tag = vnode.tag
  98. if (isDef(tag)) {
  99. if (process.env.NODE_ENV !== "production") {
  100. if (data && data.pre) {
  101. inPre++
  102. }
  103. if (
  104. !inPre &&
  105. !vnode.ns &&
  106. !(
  107. config.ignoredElements.length &&
  108. config.ignoredElements.some(ignore => {
  109. return isRegExp(ignore)
  110. ? ignore.test(tag)
  111. : ignore === tag
  112. })
  113. ) &&
  114. config.isUnknownElement(tag)
  115. ) {
  116. warn(
  117. "Unknown custom element: <" + tag + "> - did you " +
  118. "register the component correctly? For recursive components, " +
  119. "make sure to provide the "name" option.",
  120. vnode.context
  121. )
  122. }
  123. }
  124. vnode.elm = vnode.ns
  125. ? nodeOps.createElementNS(vnode.ns, tag)
  126. : nodeOps.createElement(tag, vnode)
  127. setScope(vnode)
  128. /* istanbul ignore if */
  129. if (__WEEX__) {
  130. // in Weex, the default insertion order is parent-first.
  131. // List items can be optimized to use children-first insertion
  132. // with append="tree".
  133. const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
  134. if (!appendAsTree) {
  135. if (isDef(data)) {
  136. invokeCreateHooks(vnode, insertedVnodeQueue)
  137. }
  138. insert(parentElm, vnode.elm, refElm)
  139. }
  140. createChildren(vnode, children, insertedVnodeQueue)
  141. if (appendAsTree) {
  142. if (isDef(data)) {
  143. invokeCreateHooks(vnode, insertedVnodeQueue)
  144. }
  145. insert(parentElm, vnode.elm, refElm)
  146. }
  147. } else {
  148. createChildren(vnode, children, insertedVnodeQueue)
  149. if (isDef(data)) {
  150. invokeCreateHooks(vnode, insertedVnodeQueue)
  151. }
  152. insert(parentElm, vnode.elm, refElm)
  153. }
  154. if (process.env.NODE_ENV !== "production" && data && data.pre) {
  155. inPre--
  156. }
  157. } else if (isTrue(vnode.isComment)) {
  158. vnode.elm = nodeOps.createComment(vnode.text)
  159. insert(parentElm, vnode.elm, refElm)
  160. } else {
  161. vnode.elm = nodeOps.createTextNode(vnode.text)
  162. insert(parentElm, vnode.elm, refElm)
  163. }
  164. }
  165. function insert (parent, elm, ref) {
  166. if (isDef(parent)) {
  167. if (isDef(ref)) {
  168. if (ref.parentNode === parent) {
  169. nodeOps.insertBefore(parent, elm, ref)
  170. }
  171. } else {
  172. nodeOps.appendChild(parent, elm)
  173. }
  174. }
  175. }
  176. function removeVnodes (parentElm, vnodes, startIdx, endIdx) {
  177. for (; startIdx <= endIdx; ++startIdx) {
  178. const ch = vnodes[startIdx]
  179. if (isDef(ch)) {
  180. if (isDef(ch.tag)) {
  181. removeAndInvokeRemoveHook(ch)
  182. invokeDestroyHook(ch)
  183. } else { // Text node
  184. removeNode(ch.elm)
  185. }
  186. }
  187. }
  188. }

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

通过一个例子来模拟一下:
假设有新旧2棵树,树中的子节点分别为a,b,c,d等表示,不同的代号代表不同的vnode,如:

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

更新完节点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,如图:

更新完节点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,如图:

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92972.html

相关文章

  • 虚拟 DOM 到底是什么?

    摘要:很多人认为虚拟最大的优势是算法,减少操作真实的带来的性能消耗。虽然这一个虚拟带来的一个优势,但并不是全部。回到最开始的问题,虚拟到底是什么,说简单点,就是一个普通的对象,包含了三个属性。 是什么? 虚拟 DOM (Virtual DOM )这个概念相信大家都不陌生,从 React 到 Vue ,虚拟 DOM 为这两个框架都带来了跨平台的能力(React-Native 和 Weex)。因...

    jayce 评论0 收藏0
  • Vue虚拟DOM及diff算法

    摘要:的算法是基于的实现,并在些基础上作了很多的调整和改进。此时和之间的是新增的,调用,把这些虚拟全部插进的后边,可以认为新节点先遍历完。 虚拟dom 为什么出现:浏览器解析一个html大致分为五步:创建DOM tree –> 创建Style Rules -> 构建Render tree -> 布局Layout –> 绘制Painting。每次对真实dom进行操作的时候,浏览器都会从构建...

    李昌杰 评论0 收藏0
  • snabbdom源码解析(一) 准备工作

    摘要:阅读源码的时候,想了解虚拟结构的实现,发现在的地方。然而慢慢的人们发现,在我们的代码中布满了一系列操作的代码。源码解析系列源码解析一准备工作源码解析二函数源码解析三对象源码解析四方法源码解析五钩子源码解析六模块源码解析七事件处理个人博客地址 前言 虚拟 DOM 结构概念随着 react 的诞生而火起来,之后 vue2.0 也加入了虚拟 DOM 的概念。 阅读 vue 源码的时候,想了解...

    defcon 评论0 收藏0
  • vue源码阅读之数据渲染过程

    摘要:图在中应用三数据渲染过程数据绑定实现逻辑本节正式分析从到数据渲染到页面的过程,在中定义了一个的构造函数。一、概述 vue已是目前国内前端web端三分天下之一,也是工作中主要技术栈之一。在日常使用中知其然也好奇着所以然,因此尝试阅读vue源码并进行总结。本文旨在梳理初始化页面时data中的数据是如何渲染到页面上的。本文将带着这个疑问一点点追究vue的思路。总体来说vue模版渲染大致流程如图1所...

    AlphaGooo 评论0 收藏0
  • VirtualDOM与diff(Vue实现)

    摘要:如果以上情况均不符合,则通过会得到一个,里面存放了一个为旧的,为对应序列的哈希表。从这个哈希表中可以找到是否有与一致的旧的节点,如果同时满足,的同时会将这个真实移动到对应的真实的前面。 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。文章的原地址:https://github.com/ans...

    MAX_zuo 评论0 收藏0
  • Vue2 transition源码分析

    摘要:至此算是找到了源码位置。至此进入过渡的部分完毕。在动画结束后,调用了由组件生命周期传入的方法,把这个元素的副本移出了文档流。这篇并没有去分析相关的内容,推荐一篇讲非常不错的文章,对构造函数如何来的感兴趣的同学可以看这里 Vue transition源码分析 本来打算自己造一个transition的轮子,所以决定先看看源码,理清思路。Vue的transition组件提供了一系列钩子函数,...

    Genng 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<