当前位置:Gxlcms > JavaScript > Vue实现virtual-dom的原理简析

Vue实现virtual-dom的原理简析

时间:2021-07-01 10:21:17 帮助过:6人阅读

virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现,virtual-dom也是react这个框架的非常重要的特性之一。相比于频繁的手动去操作dom而带来性能问题,vdom很好的将dom做了一层映射关系,进而将在我们本需要直接进行dom的一系列操作,映射到了操作vdom,而vdom上定义了关于真实dom的一些关键的信息,vdom完全是用js去实现,和宿主浏览器没有任何联系,此外得益于js的执行速度,将原本需要在真实dom进行的创建节点,删除节点,添加节点等一系列复杂的dom操作全部放到vdom中进行,这样就通过操作vdom来提高直接操作的dom的效率和性能。

Vue在2.0版本也引入了vdom。其vdom算法是基于snabbdom算法所做的修改。

在Vue的整个应用生命周期当中,每次需要更新视图的时候便会使用vdom。那么在Vue当中,vdom是如何和Vue这个框架融合在一起工作的呢?以及大家常常提到的vdom的diff算法又是怎样的呢?接下来就通过这篇文章简单的向大家介绍下Vue当中的vdom是如何去工作的。

首先,我们还是来看下Vue生命周期当中初始化的最后阶段:将vm实例挂载到dom上,源码在src/core/instance

  1. Vue.prototype._init = function () {
  2. ...
  3. vm.$mount(vm.$options.el) // 实际上是调用了mountComponent方法
  4. ...
  5. }

mountComponent函数的定义是:

  1. export function mountComponent (
  2. vm: Component,
  3. el: ?Element,
  4. hydrating?: boolean
  5. ): Component {
  6. // vm.$el为真实的node
  7. vm.$el = el
  8. // 如果vm上没有挂载render函数
  9. if (!vm.$options.render) {
  10. // 空节点
  11. vm.$options.render = createEmptyVNode
  12. }
  13. // 钩子函数
  14. callHook(vm, 'beforeMount')
  15. let updateComponent
  16. /* istanbul ignore if */
  17. if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  18. ...
  19. } else {
  20. // updateComponent为监听函数, new Watcher(vm, updateComponent, noop)
  21. updateComponent = () => {
  22. // Vue.prototype._render 渲染函数
  23. // vm._render() 返回一个VNode
  24. // 更新dom
  25. // vm._render()调用render函数,会返回一个VNode,在生成VNode的过程中,会动态计算getter,同时推入到dep里面
  26. vm._update(vm._render(), hydrating)
  27. }
  28. }
  29. // 新建一个_watcher对象
  30. // vm实例上挂载的_watcher主要是为了更新DOM
  31. // vm/expression/cb
  32. vm._watcher = new Watcher(vm, updateComponent, noop)
  33. hydrating = false
  34. // manually mounted instance, call mounted on self
  35. // mounted is called for render-created child components in its inserted hook
  36. if (vm.$vnode == null) {
  37. vm._isMounted = true
  38. callHook(vm, 'mounted')
  39. }
  40. return vm
  41. }

注意上面的代码中定义了一个updateComponent函数,这个函数执行的时候内部会调用vm._update(vm._render(), hyddrating)方法,其中vm._render方法会返回一个新的vnode,(关于vm_render是如何生成vnode的建议大家看看vue的关于compile阶段的代码),然后传入vm._update方法后,就用这个新的vnode和老的vnode进行diff,最后完成dom的更新工作。那么updateComponent都是在什么时候去进行调用呢?

  1. vm._watcher = new Watcher(vm, updateComponent, noop)

实例化一个watcher,在求值的过程中this.value = this.lazy ? undefined : this.get(),会调用this.get()方法,因此在实例化的过程当中Dep.target会被设为这个watcher,通过调用vm._render()方法生成新的Vnode并进行diff的过程中完成了模板当中变量依赖收集工作。即这个watcher被添加到了在模板当中所绑定变量的依赖当中。一旦model中的响应式的数据发生了变化,这些响应式的数据所维护的dep数组便会调用dep.notify()方法完成所有依赖遍历执行的工作,这里面就包括了视图的更新即updateComponent方法的调用。

updateComponent方法的定义是:

  1. updateComponent = () => {
  2. vm._update(vm._render(), hydrating)
  3. }

完成视图的更新工作事实上就是调用了vm._update方法,这个方法接收的第一个参数是刚生成的Vnode,调用的vm._update方法的定义是

  1. Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  2. const vm: Component = this
  3. if (vm._isMounted) {
  4. callHook(vm, 'beforeUpdate')
  5. }
  6. const prevEl = vm.$el
  7. const prevVnode = vm._vnode
  8. const prevActiveInstance = activeInstance
  9. activeInstance = vm
  10. // 新的vnode
  11. vm._vnode = vnode
  12. // Vue.prototype.__patch__ is injected in entry points
  13. // based on the rendering backend used.
  14. // 如果需要diff的prevVnode不存在,那么就用新的vnode创建一个真实dom节点
  15. if (!prevVnode) {
  16. // initial render
  17. // 第一个参数为真实的node节点
  18. vm.$el = vm.__patch__(
  19. vm.$el, vnode, hydrating, false /* removeOnly */,
  20. vm.$options._parentElm,
  21. vm.$options._refElm
  22. )
  23. } else {
  24. // updates
  25. // 如果需要diff的prevVnode存在,那么首先对prevVnode和vnode进行diff,并将需要的更新的dom操作已patch的形式打到prevVnode上,并完成真实dom的更新工作
  26. vm.$el = vm.__patch__(prevVnode, vnode)
  27. }
  28. activeInstance = prevActiveInstance
  29. // update __vue__ reference
  30. if (prevEl) {
  31. prevEl.__vue__ = null
  32. }
  33. if (vm.$el) {
  34. vm.$el.__vue__ = vm
  35. }
  36. // if parent is an HOC, update its $el as well
  37. if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
  38. vm.$parent.$el = vm.$el
  39. }
  40. }

在这个方法当中最为关键的就是vm.__patch__方法,这也是整个virtaul-dom当中最为核心的方法,主要完成了prevVnode和vnode的diff过程并根据需要操作的vdom节点打patch,最后生成新的真实dom节点并完成视图的更新工作。

接下来就让我们看下vm.__patch__里面到底发生了什么:

  1. function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
  2. // 当oldVnode不存在时
  3. if (isUndef(oldVnode)) {
  4. // 创建新的节点
  5. createElm(vnode, insertedVnodeQueue, parentElm, refElm)
  6. } else {
  7. const isRealElement = isDef(oldVnode.nodeType)
  8. if (!isRealElement && sameVnode(oldVnode, vnode)) {
  9. // patch existing root node
  10. // 对oldVnode和vnode进行diff,并对oldVnode打patch
  11. patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
  12. }
  13. }
  14. }

在对oldVnode和vnode类型判断中有个sameVnode方法,这个方法决定了是否需要对oldVnode和vnode进行diff及patch的过程。

  1. function sameVnode (a, b) {
  2. return (
  3. a.key === b.key &&
  4. a.tag === b.tag &&
  5. a.isComment === b.isComment &&
  6. isDef(a.data) === isDef(b.data) &&
  7. sameInputType(a, b)
  8. )
  9. }

sameVnode会对传入的2个vnode进行基本属性的比较,只有当基本属性相同的情况下才认为这个2个vnode只是局部发生了更新,然后才会对这2个vnode进行diff,如果2个vnode的基本属性存在不一致的情况,那么就会直接跳过diff的过程,进而依据vnode新建一个真实的dom,同时删除老的dom节点。

vnode基本属性的定义可以参见源码:src/vdom/vnode.js里面对于vnode的定义。

  1. constructor (
  2. tag?: string,
  3. data?: VNodeData, // 关于这个节点的data值,包括attrs,style,hook等
  4. children?: ?Array<VNode>, // 子vdom节点
  5. text?: string, // 文本内容
  6. elm?: Node, // 真实的dom节点
  7. context?: Component, // 创建这个vdom的上下文
  8. componentOptions?: VNodeComponentOptions
  9. ) {
  10. this.tag = tag
  11. this.data = data
  12. this.children = children
  13. this.text = text
  14. this.elm = elm
  15. this.ns = undefined
  16. this.context = context
  17. this.functionalContext = undefined
  18. this.key = data && data.key
  19. this.componentOptions = componentOptions
  20. this.componentInstance = undefined
  21. this.parent = undefined
  22. this.raw = false
  23. this.isStatic = false
  24. this.isRootInsert = true
  25. this.isComment = false
  26. this.isCloned = false
  27. this.isOnce = false
  28. }
  29. // DEPRECATED: alias for componentInstance for backwards compat.
  30. /* istanbul ignore next */
  31. get child (): Component | void {
  32. return this.componentInstance
  33. }
  34. }

每一个vnode都映射到一个真实的dom节点上。其中几个比较重要的属性:

  1. tag 属性即这个vnode的标签属性
  2. data 属性包含了最后渲染成真实dom节点后,节点上的class,attribute,style以及绑定的事件
  3. children 属性是vnode的子节点
  4. text 属性是文本属性
  5. elm 属性为这个vnode对应的真实dom节点
  6. key 属性是vnode的标记,在diff过程中可以提高diff的效率,后文有讲解

比如,我定义了一个vnode,它的数据结构是:

  1. {
  2. tag: 'div'
  3. data: {
  4. id: 'app',
  5. class: 'page-box'
  6. },
  7. children: [
  8. {
  9. tag: 'p',
  10. text: 'this is demo'
  11. }
  12. ]
  13. }

最后渲染出的实际的dom结构就是:

  1. <div id="app" class="page-box">
  2. <p>this is demo</p>
  3. </div>

让我们再回到patch函数当中,在当oldVnode不存在的时候,这个时候是root节点初始化的过程,因此调用了createElm(vnode, insertedVnodeQueue, parentElm, refElm)方法去创建一个新的节点。而当oldVnode是vnode且sameVnode(oldVnode, vnode)2个节点的基本属性相同,那么就进入了2个节点的diff过程。

diff的过程主要是通过调用patchVnode方法进行的:

  1. function patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly) {
  2. ...
  3. }
  1. if (isDef(data) && isPatchable(vnode)) {
  2. // cbs保存了hooks钩子函数: 'create', 'activate', 'update', 'remove', 'destroy'
  3. // 取出cbs保存的update钩子函数,依次调用,更新attrs/style/class/events/directives/refs等属性
  4. for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
  5. if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
  6. }

更新真实dom节点的data属性,相当于对dom节点进行了预处理的操作

接下来:

  1. ...
  2. const elm = vnode.elm = oldVnode.elm
  3. const oldCh = oldVnode.children
  4. const ch = vnode.children
  5. // 如果vnode没有文本节点
  6. if (isUndef(vnode.text)) {
  7. // 如果oldVnode的children属性存在且vnode的属性也存在
  8. if (isDef(oldCh) && isDef(ch)) {
  9. // updateChildren,对子节点进行diff
  10. if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
  11. } else if (isDef(ch)) {
  12. // 如果oldVnode的text存在,那么首先清空text的内容
  13. if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
  14. // 然后将vnode的children添加进去
  15. addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
  16. } else if (isDef(oldCh)) {
  17. // 删除elm下的oldchildren
  18. removeVnodes(elm, oldCh, 0, oldCh.length - 1)
  19. } else if (isDef(oldVnode.text)) {
  20. // oldVnode有子节点,而vnode没有,那么就清空这个节点
  21. nodeOps.setTextContent(elm, '')
  22. }
  23. } else if (oldVnode.text !== vnode.text) {
  24. // 如果oldVnode和vnode文本属性不同,那么直接更新真是dom节点的文本元素
  25. nodeOps.setTextContent(elm, vnode.text)
  26. }

这其中的diff过程中又分了好几种情况,oldCh为oldVnode的子节点,ch为Vnode的子节点:

  1. 首先进行文本节点的判断,若oldVnode.text !== vnode.text,那么就会直接进行文本节点的替换;
  2. 在vnode没有文本节点的情况下,进入子节点的diff;
  3. 当oldCh和ch都存在且不相同的情况下,调用updateChildren对子节点进行diff;
  4. 若oldCh不存在,ch存在,首先清空oldVnode的文本节点,同时调用addVnodes方法将ch添加到elm真实dom节点当中;
  5. 若oldCh存在,ch不存在,则删除elm真实节点下的oldCh子节点;
  6. 若oldVnode有文本节点,而vnode没有,那么就清空这个文本节点。

这里着重分析下updateChildren方法,它也是整个diff过程中最重要的环节:

  1. function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  2. // 为oldCh和newCh分别建立索引,为之后遍历的依据
  3. let oldStartIdx = 0
  4. let newStartIdx = 0
  5. let oldEndIdx = oldCh.length - 1
  6. let oldStartVnode = oldCh[0]
  7. let oldEndVnode = oldCh[oldEndIdx]
  8. let newEndIdx = newCh.length - 1
  9. let newStartVnode = newCh[0]
  10. let newEndVnode = newCh[newEndIdx]
  11. let oldKeyToIdx, idxInOld, elmToMove, refElm
  12. // 直到oldCh或者newCh被遍历完后跳出循环
  13. while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  14. if (isUndef(oldStartVnode)) {
  15. oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
  16. } else if (isUndef(oldEndVnode)) {
  17. oldEndVnode = oldCh[--oldEndIdx]
  18. } else if (sameVnode(oldStartVnode, newStartVnode)) {
  19. patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
  20. oldStartVnode = oldCh[++oldStartIdx]
  21. newStartVnode = newCh[++newStartIdx]
  22. } else if (sameVnode(oldEndVnode, newEndVnode)) {
  23. patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
  24. oldEndVnode = oldCh[--oldEndIdx]
  25. newEndVnode = newCh[--newEndIdx]
  26. } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
  27. patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
  28. canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
  29. oldStartVnode = oldCh[++oldStartIdx]
  30. newEndVnode = newCh[--newEndIdx]
  31. } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
  32. patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
  33. // 插入到老的开始节点的前面
  34. canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
  35. oldEndVnode = oldCh[--oldEndIdx]
  36. newStartVnode = newCh[++newStartIdx]
  37. } else {
  38. // 如果以上条件都不满足,那么这个时候开始比较key值,首先建立key和index索引的对应关系
  39. if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
  40. idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null
  41. // 如果idxInOld不存在
  42. // 1. newStartVnode上存在这个key,但是oldKeyToIdx中不存在
  43. // 2. newStartVnode上并没有设置key属性
  44. if (isUndef(idxInOld)) { // New element
  45. // 创建新的dom节点
  46. // 插入到oldStartVnode.elm前面
  47. // 参见createElm方法
  48. createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
  49. newStartVnode = newCh[++newStartIdx]
  50. } else {
  51. elmToMove = oldCh[idxInOld]
  52. /* istanbul ignore if */
  53. if (process.env.NODE_ENV !== 'production' && !elmToMove) {
  54. warn(
  55. 'It seems there are duplicate keys that is causing an update error. ' +
  56. 'Make sure each v-for item has a unique key.'
  57. )
  58. // 将找到的key一致的oldVnode再和newStartVnode进行diff
  59. if (sameVnode(elmToMove, newStartVnode)) {
  60. patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
  61. oldCh[idxInOld] = undefined
  62. // 移动node节点
  63. canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
  64. newStartVnode = newCh[++newStartIdx]
  65. } else {
  66. // same key but different element. treat as new element
  67. // 创建新的dom节点
  68. createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
  69. newStartVnode = newCh[++newStartIdx]
  70. }
  71. }
  72. }
  73. }
  74. // 如果最后遍历的oldStartIdx大于oldEndIdx的话
  75. if (oldStartIdx > oldEndIdx) { // 如果是老的vdom先被遍历完
  76. refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
  77. // 添加newVnode中剩余的节点到parentElm中
  78. addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  79. } else if (newStartIdx > newEndIdx) { // 如果是新的vdom先被遍历完,则删除oldVnode里面所有的节点
  80. // 删除剩余的节点
  81. removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
  82. }
  83. }

在开始遍历diff前,首先给oldCh和newCh分别分配一个startIndex和endIndex来作为遍历的索引,当oldCh或者newCh遍历完后(遍历完的条件就是oldCh或者newCh的startIndex >= endIndex),就停止oldCh和newCh的diff过程。接下来通过实例来看下整个diff的过程(节点属性中不带key的情况):

首先从第一个节点开始比较,不管是oldCh还是newCh的起始或者终止节点都不存在sameVnode,同时节点属性中是不带key标记的,因此第一轮的diff完后,newCh的startVnode被添加到oldStartVnode的前面,同时newStartIndex前移一位;

第二轮的diff中,满足sameVnode(oldStartVnode, newStartVnode),因此对这2个vnode进行diff,最后将patch打到oldStartVnode上,同时oldStartVnode和newStartIndex都向前移动一位

第三轮的diff中,满足sameVnode(oldEndVnode, newStartVnode),那么首先对oldEndVnode和newStartVnode进行diff,并对oldEndVnode进行patch,并完成oldEndVnode移位的操作,最后newStartIndex前移一位,oldStartVnode后移一位;

第四轮的diff中,过程同步骤3;

第五轮的diff中,同过程1;

遍历的过程结束后,newStartIdx > newEndIdx,说明此时oldCh存在多余的节点,那么最后就需要将这些多余的节点删除。

在vnode不带key的情况下,每一轮的diff过程当中都是起始和结束节点进行比较,直到oldCh或者newCh被遍历完。而当为vnode引入key属性后,在每一轮的diff过程中,当起始和结束节点都没有找到sameVnode时,首先对oldCh中进行key值与索引的映射:

  1. if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
  2. idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null

createKeyToOldIdx方法,用以将oldCh中的key属性作为键,而对应的节点的索引作为值。然后再判断在newStartVnode的属性中是否有key,且是否在oldKeyToIndx中找到对应的节点。

如果不存在这个key,那么就将这个newStartVnode作为新的节点创建且插入到原有的root的子节点中:

  1. if (isUndef(idxInOld)) { // New element
  2. // 创建新的dom节点
  3. // 插入到oldStartVnode.elm前面
  4. // 参见createElm方法
  5. createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
  6. newStartVnode = newCh[++newStartIdx]
  7. }

如果存在这个key,那么就取出oldCh中的存在这个key的vnode,然后再进行diff的过程:

  1. elmToMove = oldCh[idxInOld]
  2. /* istanbul ignore if */
  3. if (process.env.NODE_ENV !== 'production' && !elmToMove) {
  4. // 将找到的key一致的oldVnode再和newStartVnode进行diff
  5. if (sameVnode(elmToMove, newStartVnode)) {
  6. patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
  7. // 清空这个节点
  8. oldCh[idxInOld] = undefined
  9. // 移动node节点
  10. canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
  11. newStartVnode = newCh[++newStartIdx]
  12. } else {
  13. // same key but different element. treat as new element
  14. // 创建新的dom节点
  15. createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
  16. newStartVnode = newCh[++newStartIdx]
  17. }

通过以上分析,给vdom上添加key属性后,遍历diff的过程中,当起始点, 结束点的搜寻及diff出现还是无法匹配的情况下时,就会用key来作为唯一标识,来进行diff,这样就可以提高diff效率。

带有Key属性的vnode的diff过程可见下图:

注意在第一轮的diff过后oldCh上的B节点被删除了,但是newCh上的B节点上elm属性保持对oldCh上B节点的elm引用。





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

人气教程排行