vue源码之虚拟dom与diff算法

最新推荐文章于 2023-05-14 22:38:44 发布
原创 最新推荐文章于 2023-05-14 22:38:44 发布 · 367 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

虚拟dom

简介

  • 虚拟dom就是用js对象来描述一个dom节点
  • vue是数据驱动视图的，数据发生变化视图就要随之更新，在更新视图的操作中难免要操作dom，而操作真是dom又是非常耗费性能的，因为浏览器把dom设计的非常复杂
  • 所以我们要尽量少的操作dom，不要盲目的去更新视图，而是通过对比数据变化前后的状态，计算出视图中那些地方需要更新，只更新需要更新的地方
  • 通过js模拟一个dom节点，称为虚拟dom节点·，当数据发生变化时，对比变化前后的虚拟dom节点，通过diff算法计算出需要更新的地方，然后再去更新视图

接下来，我们就来看一下vue中如何实现虚拟dom

VNode类

虚拟dom就是通过这个类实例出来的，也就是说，我们可以通过这个类实例化不同的虚拟dom节点

虚拟dom节点其实就是一个对象，而这个类的作用就是在这个对象上添加各种属性，其源码如下：

export default class VNode {
  tag?: string
  data: VNodeData | undefined
  children?: Array<VNode> | null
  text?: string
  elm: Node | undefined
  ns?: string
  context?: Component // rendered in this component's scope
  key: string | number | undefined
  componentOptions?: VNodeComponentOptions
  componentInstance?: Component // component instance
  parent: VNode | undefined | null // component placeholder node

  // strictly internal
  raw: boolean // contains raw HTML? (server only)
  isStatic: boolean // hoisted static node
  isRootInsert: boolean // necessary for enter transition check
  isComment: boolean // empty comment placeholder?
  isCloned: boolean // is a cloned node?
  isOnce: boolean // is a v-once node?
  asyncFactory?: Function // async component factory function
  asyncMeta: Object | void
  isAsyncPlaceholder: boolean
  ssrContext?: Object | void
  fnContext: Component | void // real context vm for functional nodes
  fnOptions?: ComponentOptions | null // for SSR caching
  devtoolsMeta?: Object | null // used to store functional render context for devtools
  fnScopeId?: string | null // functional scope id support

  constructor(
    tag?: string,  // 当前节点的标签名
    data?: VNodeData,  // 当前节点对应的对象，包含了一些具体的一些数据对象
    children?: Array<VNode> | null,  // 当前节点的子节点组成的一个数组
    text?: string,  // 当前节点的文本
    elm?: Node,  // 当前虚拟节点对应的真实dom节点
    context?: Component,  // 当前组件节点对应的vue实例
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.ns = undefined
    this.context = context
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key  // 节点的key属性，被当做节点的标志，后续diff算法就是通过这个属性判断是否是同一个节点
    this.componentOptions = componentOptions
    this.componentInstance = undefined
    this.parent = undefined
    this.raw = false
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false  // /*是否为注释节点*/
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next */
  get child(): Component | void {
    return this.componentInstance
  }
}

vnode类包含了虚拟dom需要的一些类属性，一下几个属性是比较重要的：

  • tag：属性的标签名
  • data：节点包含的信息，比如class类名等
  • children：节点包含的子节电，是一个数组
  • text：节点包含的文本属性
  • elm：虚拟节点对应的真实don节点

VNode类型

不同的真实dom对应不同的虚拟dom类型，并拥有不同的属性，其中，就有一下几种类型：

  • 注释节点
  • 文本节点
  • 元素节点
  • 组件节点
  • 函数式组件节点
  • 克隆节点

VNode的作用

我们在视图渲染之前，把写好的template模板先编译成VNode并缓存下来，等到数据发生变化页面需要重新渲染的时候，我们把数据发生变化后生成的VNode与前一次缓存下来的VNode进行对比，找出差异，然后有差异的VNode对应的真实DOM节点就是需要重新渲染的节点，最后根据有差异的VNode创建出真实的DOM节点再插入到视图中，最终完成一次视图更新。

vue中的diff算法

这个过程就是通过新旧vnode对比，找出差异所在

整体过程：

  • 首先，通过pathc方法比对，判断是否是同一个节点，如果不是同一个节点，就删除旧的节点，插入新的节点。
  • 如果新旧节点是同一个节点，就调用patchVnode方法，比对同一个节点
  • 在patchVnode中，判断新旧节点是否有children属性，没有的话过程就比较简单，有的话就要调用updateChildren方法
  • 在updateChildren方法中会进行diff算法的比对

接下来就来看看各个过程的实现

patch

path方法以新的vnode为基准，改造就的vnode节点使之和新的vnode节点一样，主要做一下内容：

  • 创建节点：新的VNode中有而旧的oldVNode中没有，就在旧的oldVNode中创建。
  • 删除节点：新的VNode中没有而旧的oldVNode中有，就从旧的oldVNode中删除。
  • 更新节点：新的VNode和旧的oldVNode中都有，就以新的VNode为准，更新旧的oldVNode。

具体过程：

  • 先判断老节点是否是一个虚拟节点，如果不是的话，先要转化为虚拟节点，才能进行比对

  • 判断新老节点是否是同一个节点，判断的依据是新老节点的tag属性和key属性是否相同，如果相同就是同一个节点，不同则不是同一个节点

  • 如果是同一个节点，就要执行patchVnode方法进行同一个节点的比对

  • 如果不是同一个节点的话，就需要插入新的节点，并删除旧的节点

  • 简易代码实现

    export default function patch(oldVnode, newVnode) {
    // 判断传入的第一个参数，是DOM节点还是虚拟节点？
    if (oldVnode.sel == '' || oldVnode.sel == undefined) {
        // 传入的第一个参数是DOM节点，此时要包装为虚拟节点
        oldVnode = vnode(oldVnode.tagName.toLowerCase(), {}, [], undefined, oldVnode);
    }

    // 判断oldVnode和newVnode是不是同一个节点
    if (oldVnode.key == newVnode.key && oldVnode.sel == newVnode.sel) {
        console.log('是同一个节点');
        patchVnode(oldVnode, newVnode);
    } else {
        console.log('不是同一个节点，暴力插入新的，删除旧的');
        let newVnodeElm = createElement(newVnode);
        
        // 插入到老节点之前
        if (oldVnode.elm.parentNode && newVnodeElm) {
            oldVnode.elm.parentNode.insertBefore(newVnodeElm, oldVnode.elm);
        }
        // 删除老节点
        oldVnode.elm.parentNode.removeChild(oldVnode.elm);
    }
};

在这里，有个createElement方法，是用来创建新节点的，要注意一点的是，如果新节点有children属性的话，还需要依次创建子节点，并插入到新节点中，具体代码如下：

// 真正创建节点。将vnode创建为DOM，是孤儿节点，不进行插入
export default function createElement(vnode) {
    // console.log('目的是把虚拟节点', vnode, '真正变为DOM');
    // 创建一个DOM节点，这个节点现在还是孤儿节点
    let domNode = document.createElement(vnode.sel);
    // 有子节点还是有文本？？
    if (vnode.text != '' && (vnode.children == undefined || vnode.children.length == 0)) {
        // 它内部是文字
        domNode.innerText = vnode.text;
    } else if (Array.isArray(vnode.children) && vnode.children.length > 0) {
        // 它内部是子节点，就要递归创建节点
        for (let i = 0; i < vnode.children.length; i++) {
            // 得到当前这个children
            let ch = vnode.children[i];
            // 创建出它的DOM，一旦调用createElement意味着：创建出DOM了，并且它的elm属性指向了创建出的DOM，但是还没有上树，是一个孤儿节点。
            let chDOM = createElement(ch);
            // 上树
            domNode.appendChild(chDOM);
        }
    }
    // 补充elm属性
    vnode.elm = domNode;
   
    // 返回elm，elm属性是一个纯DOM对象
    return vnode.elm;
};

patchVnode

当新旧节点是同一个节点的时候，就需要调用这个方法比对同一个节点

静态节点

静态节点就是只包含纯文字的节点，比如<p>123456</p>，这个节点没有包含任何可变的变量，也就是说，不管数据怎么变化，这个节点只要渲染后，以后就永远不会改变了，任何数据变化都与它无关。所以pathVnode方法在碰到静态节点的时候，会直接跳过，无需处理

patchVnode在比对新旧同一个节点的时候，会经过以下过程：

  • 如果新旧节点是同一个节点的话，直接返回

  • 如果vnode和oldvnode均为静态节点的话，直接返回，因为此时新旧节点是同一个不会改变的节点！

  • 如果vnode是文本节点，则判断oldvnode节点的text属性是否相等，如果不相等的话，则直接将oldvnode的内容更改为vnode的文本，这个时候就不需要知道oldvnode里面包含了什么了

  • 如果vnode是元素节点

    • vnode包含子节点

      • 如果oldvnode也包含子节点，就需要调用updateChildren方法进行diff算法的比对了
      • 如果oldVnode不包含子节点，则直接清空oldvnode节点的内容，再将vnode的子节点添加在oldvnode对应的真实dom节点上

    • vnode不包含子节点

      如果该节点不包含子节点，同时它又不是文本节点，那就说明该节点是个空节点，那就好办了，不管旧节点之前里面都有啥，直接清空即可。

  • 简易版代码如下：

    // 对比同一个虚拟节点
export default function patchVnode(oldVnode, newVnode) {
    // 判断新旧vnode是否是同一个对象
    if (oldVnode === newVnode) return;
    // 判断新vnode有没有text属性
    if (newVnode.text != undefined && (newVnode.children == undefined || newVnode.children.length == 0)) {
        // 新vnode有text属性
        console.log('新vnode有text属性');
        if (newVnode.text != oldVnode.text) {
            // 如果新虚拟节点中的text和老的虚拟节点的text不同，那么直接让新的text写入老的elm中即可。如果老的elm中是children，那么也会立即消失掉。
            oldVnode.elm.innerText = newVnode.text;
        }
    } else {
        // 新vnode没有text属性，有children
        console.log('新vnode没有text属性');
        // 判断老的有没有children
        if (oldVnode.children != undefined && oldVnode.children.length > 0) {
            // 老的有children，新的也有children，此时就是最复杂的情况。
            updateChildren(oldVnode.elm, oldVnode.children, newVnode.children);
        } else {
            // 老的没有children，新的有children
            // 清空老的节点的内容
            oldVnode.elm.innerHTML = '';
            // 遍历新的vnode的子节点，创建DOM，上树
            for (let i = 0; i < newVnode.children.length; i++) {
                let dom = createElement(newVnode.children[i]);
                oldVnode.elm.appendChild(dom);
            }
        }
    }
}

对应源码：

function patchVnode(
    oldVnode,
    vnode,
    insertedVnodeQueue,
    ownerArray,
    index,
    removeOnly?: any
  ) {
    if (oldVnode === vnode) {
      return
    }

    if (isDef(vnode.elm) && isDef(ownerArray)) {
      // clone reused vnode
      vnode = ownerArray[index] = cloneVNode(vnode)
    }

    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
    }

    // reuse element for static trees.
    // note we only do this if the vnode is cloned -
    // if the new node is not cloned it means the render functions have been
    // reset by the hot-reload-api and we need to do a proper re-render.
    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 (__DEV__) {
          checkDuplicateKeys(ch)
        }
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
        removeVnodes(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)
    }
  }

updateChildren

在这个方法中，需要比对新旧节点的子节点，如果直接双层for循环判断新节点每一个子节点是否存在于旧节点的子节点中，效率就太低了，所以在vue中借鉴了diff算法进行比对，通过比较在特殊位置的新旧节点的子节点，如下：

  • 先把newChildren数组里的所有未处理子节点的第一个子节点和oldChildren数组里所有未处理子节点的第一个子节点做比对，如果相同，那就直接进入更新节点的操作；
  • 如果不同，再把newChildren数组里所有未处理子节点的最后一个子节点和oldChildren数组里所有未处理子节点的最后一个子节点做比对，如果相同，那就直接进入更新节点的操作；
  • 如果不同，再把newChildren数组里所有未处理子节点的最后一个子节点和oldChildren数组里所有未处理子节点的第一个子节点做比对，如果相同，那就直接进入更新节点的操作，更新完后再将oldChildren数组里的该节点移动到与newChildren数组里节点相同的位置；
  • 如果不同，再把newChildren数组里所有未处理子节点的第一个子节点和oldChildren数组里所有未处理子节点的最后一个子节点做比对，如果相同，那就直接进入更新节点的操作，更新完后再将oldChildren数组里的该节点移动到与newChildren数组里节点相同的位置；
  • 最后四种情况都试完如果还不同，那就按照之前循环的方式来查找节点。

为了达到上面所说的比对过程，需要定义四个指针分别指向newChildren和oldChildren的首尾位置，并通过上面四个规则去移动指针

  • newChildren数组里的所有未处理子节点的第一个子节点称为：新前；
  • newChildren数组里的所有未处理子节点的最后一个子节点称为：新后；
  • oldChildren数组里的所有未处理子节点的第一个子节点称为：旧前；
  • oldChildren数组里的所有未处理子节点的最后一个子节点称为：旧后；

上面的比对规则，可以归纳为以下四种比较，从上往下如果命中哪种规则后，对应的指针就会移动位置

  • 新前与旧前
  • 新后与旧后
  • 新后与旧前
  • 新前与旧后

接下来，就详细介绍比对的过程

  • 首先，定义四个指针指向新老children首尾位置，并定义四个变量存放对应位置的节点

  • 首先比对"新前与旧前"和"新后与旧后"，如果命中了，对应指针变换位置，注意，命中之后，要调用patchVnode方法比对同一个节点

    else if (checkSameVnode(oldStartVnode, newStartVnode)) {
            // 新前和旧前
            console.log('新前和旧前命中');
            patchVnode(oldStartVnode, newStartVnode);
            oldStartVnode = oldCh[++oldStartIdx];
            newStartVnode = newCh[++newStartIdx];
        } else if (checkSameVnode(oldEndVnode, newEndVnode)) {
            // 新后和旧后
            console.log('新后和旧后命中');
            patchVnode(oldEndVnode, newEndVnode);
            oldEndVnode = oldCh[--oldEndIdx];
            newEndVnode = newCh[--newEndIdx];
        }

  • 如果前两种都没有命中的话，就要判断"新后与旧前"，"新前与旧后"了，如果这两种命中的话，就证明元素的位置发生了变化，需要移动对应oldchildren节点位置，具体移动位置如下：

    • 如果命中"新后与旧前"的话，证明元素得往后移动了，注意，移动的时候要以未处理节点为基准，所以要把节点移动到旧后对应节点（此时还未处理该节点）的后面
    • 如果命中"新前与旧后"的话，证明元素被提前了，此时需要将元素移动到新后对应节点的前面
     else if (checkSameVnode(oldStartVnode, newEndVnode)) {
            // 新后和旧前
            console.log('新后和旧前命中');
            patchVnode(oldStartVnode, newEndVnode);
            // 当③新后与旧前命中的时候，此时要移动节点。移动新前指向的这个节点到老节点的旧后的后面
            // 如何移动节点？？只要你插入一个已经在DOM树上的节点，它就会被移动
            parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
            oldStartVnode = oldCh[++oldStartIdx];
            newEndVnode = newCh[--newEndIdx];
        } else if (checkSameVnode(oldEndVnode, newStartVnode)) {
            // 新前和旧后
            console.log('新前和旧后命中');
            patchVnode(oldEndVnode, newStartVnode);
            // 当④新前和旧后命中的时候，此时要移动节点。移动新前指向的这个节点到老节点的旧前的前面
            parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
            // 如何移动节点？？只要你插入一个已经在DOM树上的节点，它就会被移动
            oldEndVnode = oldCh[--oldEndIdx];
            newStartVnode = newCh[++newStartIdx];
        }

  • 如果四种规则都没有命中的话，就要遍历oldchildren，判断新前对应的节点是否存在于oldchildren中，这里可以利用哈希表，就不用每次都遍历一遍了

    • 如果找到的话，就插入到旧前对应节点前面，同时指针移动位置，注意此时需要将oldchildren对应子节点的元素设置为undefined，表示该节点已经处理过了
    • 如果没有找到的话，创建节点并插入
    else {
            // 四种命中都没有命中
            // 制作keyMap一个映射对象，这样就不用每次都遍历老对象了。
            if (!keyMap) {
                keyMap = {};
                // 从oldStartIdx开始，到oldEndIdx结束，创建keyMap映射对象
                for (let i = oldStartIdx; i <= oldEndIdx; i++) {
                    const key = oldCh[i].key;
                    if (key != undefined) {
                        keyMap[key] = i;
                    }
                }
            }
            console.log(keyMap);
            // 寻找当前这项（newStartIdx）这项在keyMap中的映射的位置序号
            const idxInOld = keyMap[newStartVnode.key];
            console.log(idxInOld);
            if (idxInOld == undefined) {
                // 判断，如果idxInOld是undefined表示它是全新的项
                // 被加入的项（就是newStartVnode这项)现不是真正的DOM节点
                parentElm.insertBefore(createElement(newStartVnode), oldStartVnode.elm);
            } else {
                // 如果不是undefined，不是全新的项，而是要移动
                const elmToMove = oldCh[idxInOld];
                patchVnode(elmToMove, newStartVnode);
                // 把这项设置为undefined，表示我已经处理完这项了
                oldCh[idxInOld] = undefined;
                // 移动，调用insertBefore也可以实现移动。
                parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm);
            }
            // 指针下移，只移动新的头
            newStartVnode = newCh[++newStartIdx];
        }

  • 基于上一种没有命中规则的情况可能出现oldchildren元素为undefined，所以需要首先就判断元素是否为undefined，是的话直接移动指针位置

  • 循环执行上面的操作，直到新前位置大于旧前或者旧前位置大于旧后位置，表示某一个数组已经全部遍历一遍了

  • 接着判断是由于哪个条件不成立退出循环了，也就是哪一个数组还有元素还没有遍历，如果oldchildren还有元素的话，证明这些元素是新的vnode中没有的子节点，所以需要依次删除；如果newchildren还有元素，则证明新的vnode增加了新的元素，也需要依次插入对应位置，此时要插入旧前对应节点的前面

    注意，这里要插入到旧前节点的前面，原因是：此时旧后在旧前的前面（退出循环的条件），也就是包括旧后与旧前这些元素的位置都确定了，所以插入只能在旧前与旧后之间，因为是从新前位置开始遍历还没有插入的子节点，如果一次从旧后节点插入的话，新插入元素位置会发生变化（逆序），而依次插入到旧前的前面就不会

     // 继续看看有没有剩余的。循环结束了start还是比old小
    if (newStartIdx <= newEndIdx) {
        console.log('new还有剩余节点没有处理，要加项。要把所有剩余的节点，都要插入到oldStartIdx之前');
        // 遍历新的newCh，添加到老的没有处理的之前
        for (let i = newStartIdx; i <= newEndIdx; i++) {
     // insertBefore方法可以自动识别null，如果是null就会自动排到队尾去。和appendChild是一致了。
            // newCh[i]现在还没有真正的DOM，所以要调用createElement()函数变为DOM
            parentElm.insertBefore(createElement(newCh[i]), oldCh[oldStartIdx].elm);
        }
    } else if (oldStartIdx <= oldEndIdx) {
        console.log('old还有剩余节点没有处理，要删除项');
        // 批量删除oldStart和oldEnd指针之间的项
        for (let i = oldStartIdx; i <= oldEndIdx; i++) {
            if (oldCh[i]) {
                parentElm.removeChild(oldCh[i].elm);
            }
        }
    }

  • 对应源码如下：

 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

    // removeOnly is a special flag used only by <transition-group>
    // to ensure removed elements stay in correct relative positions
    // during leaving transitions
    const canMove = !removeOnly

    if (__DEV__) {
      checkDuplicateKeys(newCh)
    }

    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(
          oldStartVnode,
          newStartVnode,
          insertedVnodeQueue,
          newCh,
          newStartIdx
        )
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(
          oldEndVnode,
          newEndVnode,
          insertedVnodeQueue,
          newCh,
          newEndIdx
        )
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) {
        // Vnode moved right
        patchVnode(
          oldStartVnode,
          newEndVnode,
          insertedVnodeQueue,
          newCh,
          newEndIdx
        )
        canMove &&
          nodeOps.insertBefore(
            parentElm,
            oldStartVnode.elm,
            nodeOps.nextSibling(oldEndVnode.elm)
          )
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) {
        // Vnode moved left
        patchVnode(
          oldEndVnode,
          newStartVnode,
          insertedVnodeQueue,
          newCh,
          newStartIdx
        )
        canMove &&
          nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        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)) {
          // New element
          createElm(
            newStartVnode,
            insertedVnodeQueue,
            parentElm,
            oldStartVnode.elm,
            false,
            newCh,
            newStartIdx
          )
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(
              vnodeToMove,
              newStartVnode,
              insertedVnodeQueue,
              newCh,
              newStartIdx
            )
            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,
              false,
              newCh,
              newStartIdx
            )
          }
        }
        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(oldCh, oldStartIdx, oldEndIdx)
    }
  }

自此，虚拟dom与diff算法就写完了，还有很多不足的地方，后面会继续完善！！

参考链接：

https://vue-js.com/learn-vue/virtualDOM/

https://www.bilibili.com/video/BV1iX4y1K72v?spm_id_from=333.1007.top_right_bar_window_view_later.content.click&vd_source=8bcb7d684da1204ddf081fb53feb2a84

【Vue】源码—虚拟DOM和diff算法
军火库
12-22 628
从本质上来说，虚拟DOM是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。虚拟DOM是DOM的抽象，这个对象是更加轻量级的对DOM的描述。新虚拟DOM和旧虚拟DOM进行diff(精细化比较),算出应该如何最小量更新，最后反映到真正的DOM上【虚拟节点变成DOM节点】在Vue里面叫做patch。
Vue源码之虚拟DOM
weixin_43405946的博客
05-28 826
----- 元素节点： 元素节点更贴近于我们通常所看到的真实DOM节点，他有描述节点标签名词的tag属性，描述节点属性如class，attributes等的data属性，有描述包含的子节点信息的children属性等，由于元素节点所包含的情况相对而言比较复杂，源码中没有像前三种节点一样直接写死。 VNode的作用： 用js的计算性能来换取操作真实DOM所消耗的性能， ----- VNode在Vue的整个虚拟DOM过程起到了什么作用呢。 其实VNode的作用是相当大的，我们在视图渲染之前，把写好的..
探秘vue核心之虚拟DOM与diff算法
weixin_41086056的博客
11-08 935
探秘vue核心之虚拟DOM与diff 一、真实DOM和其解析流程 所有的浏览器渲染引擎工作流程大致分为5步： 创建 DOM 树 —> 创建 Style Rules -> 构建 Render 树 —> 布局 Layout -—> 绘制 Painting。 第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树； 第二步，生成样式表：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表； 第三步，构建 Rende
vue3 虚拟DOM的diff算法
saikuuga的博客
09-20 755
我们再看一下这个题，贪心的思路就是在寻找最长递增的序列，所以，[1,3]要比[1,5]好，也就是说，在这个上升的序列中，我们要让上升速度尽可能变得慢，这样才有可能让后面的元素尽可能也递增。上面代码的思路，我们用下图演示。上一讲我们详细介绍了在虚拟 diff 计算中，如果新老子元素都是数组的时候，需要先做首尾的预判，如果新的子元素和老的子元素在预判完毕后，未处理的元素依然是数组，那么就需要对两个数组计算 diff，最终找到最短的操作路径，能够让老的子元素通过尽可能少的操作，更新成为新的子元素。
vue中的虚拟dom以及diff算法
wangqiao666888的博客
02-08 722
Vue中的虚拟dom 1.什么是虚拟DOM 通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。 什么是diff算法 1.diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。 简单地说：diff的过程就是调用名为patc
【Vue源码解析】Vue虚拟dom和diff算法
m0_61016904的博客
02-22 1503
关系diff是发生在虚拟DOM上的新虚拟DOM和旧虚拟DOM进行diff(精细化比较)，算出应该如何最小量更新，最后反映到真正的DOM上diff算法diff算法是虚拟DOM技术的产物，vue里面实际叫做patch，它的核心实现来自于snabbdom；通过新旧虚拟DOM作对比（即patch），将变化的地方转换为DOM操作。
vue 虚拟dom和diff算法详解
geejkse_seff的博客
07-31 815
什么是虚拟dom大家一定要记住的一点就是，虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。虚拟dom的结构从下图中，我们来看一看虚拟dom结构到底是怎样的如上图，这就是虚拟dom的结构，他是一个对象，下面有6个属性，sel表示当前节点标签名，data内是节点的属性，elm表示当前虚拟节点对应的真实节点（这里暂时没有），text表示当前节点下的文本，children表示当前节点下的其他标签虚拟dom的作用我们在最后整理一下步骤。...
虚拟DOM与diff算法.doc
07-09
Snabbdom是一个轻量级的虚拟DOM库，它的diff算法设计非常高效，Vue的源码中就借鉴了它的思想。如果你想在项目中使用Snabbdom，首先需要通过npm安装，如`npm i -D snabbdom`。但是，Snabbdom是一个客户端库，不能在...
Vue源码解析之虚拟DOM和diff算法学习笔记+面试考点及回答+问题及解决+心得体会及总结+snabbdom的JS版本（阉割）
weixin_54515240的博客
04-07 1091
Vue源码解析之虚拟DOM和diff算法学习笔记+问题解决+snabbdom的JS版本（阉割）+心得体会及总结+面试考点及回答
虚拟DOM与Diff算法
baichaji的博客
03-08 332
在页面渲染时，如果页面更新一次，dom就需要重新渲染一次，这样就会很玛法，也会有一定的缺陷，这个时候我们就需要一个虚拟dom来先和真实dom进行对比，比较是否发生变化，有变化，在进行重新渲染，否则不进行渲染。虚拟dom其实就是一个用来表示真实dom的一个对象。真实dom对应的虚拟domdom={//标签名//标签属性props:{}，children:[},},},下面是渲染真实dom的示意图根据上图我们可以得出直接渲染的效率比第一种的效率高许多。
虚拟dom跟Diff算法
qq_45777332的博客
05-14 530
虚拟 DOM（Virtual Document Object Model）是指将 DOM 结构抽象成 JavaScript 对象树，在这个虚拟的 JavaScript 对象树上进行操作和计算，最终再将变化的部分渲染到真实的 DOM 上。虚拟 DOM 的优点是可以最小化对真实 DOM 的操作，减少浏览器的重排和重绘，提高渲染性能和用户体验。code {其中type表示标签名，props表示属性和子元素。Diff 算法是虚拟 DOM 中用来比较两个虚拟 DOM 树之间的差异的算法。
虚拟dom理解和简单diff算法实现
weixin_47226247的博客
08-17 258
虚拟dom理解及简单diff算法的实现
react原理篇:react局部更新实现方式(虚拟DOM和Diff算法)
m0_45877477的博客
07-29 1691
虚拟DOM本身就是一个JS对象,用来描述你希望在屏幕上看到的内容(UI)react更新视图的思想只要state变化了,就重新渲染视图。react是如何做到部分更新的?答虚拟DOM+Diff算法。部分更新,只更新变化的地方。......
vue2源码（虚拟dom篇）
qq_53555672的博客
04-19 626
虚拟 DOM 篇 我们在学习vue的时候或者是react的列表渲染时总会遗漏一些key值，于是便会报错—》这些key值是什么呢？ key值是对一个列表渲染元素的标识–vue内以此来提高templete内元素转换成原生dom结构的速度 于是我们可以引入虚拟DOM这个概念 根据上一节，vue在数据层更新时，才会使视图层进行更新---------》视图层的更新 无非是通过原生的一些DOM方法来实现DOM树上元素的删减或者属性的更迭 但是对于一个DOM结构 如果直接使用其本体需要一个庞大的数据结构支持 于是我们需要
虚拟Dom、diff算法、nextTick
weixin_58034343的博客
07-29 318
虚拟Dom、diff算法、nextTick
虚拟DOM 与 diif算法
qq_44814992的博客
07-01 462
虚拟dom Q: vdom是什么？ A: 它是一个Object对象模型，用来模拟真实dom节点的结构； 虚拟DOM的使用基本流程； vdom的使用流程： - 获取数据； - 创建vdom； - 通过render函数解析jsx，将其转换成 vdom 结构； - 将 vdom 渲染成真是dom - 数据更改； - 使用 diff 算法对比两次 vdom ，生成 patch 对象； 什么是diff算...
我让虚拟DOM的diff算法过程动起来了
sinat_33488770的博客
10-30 433
去年写了一篇文章手写一个虚拟DOM库，彻底让你理解diff算法介绍虚拟的过程和算法过程，当时使用的是双端算法，今年看到了使用的已经是快速算法，所以也想写一篇来记录一下，但是肯定已经有人写过了，所以就在想能不能有点不一样的，上次的文章主要是通过画图来一步步展示算法的每一种情况和过程，所以就在想能不能改成动画的形式，于是就有了这篇文章。当然目前的实现还是基于双端算法的，后续会补充上快速算法。传送门：双端Diff算法动画演示。界面就是这样的，左侧可以输入要比较的新旧列表，然后点击启动按钮就会以动画的形式来展示从头
Flutter 响应式状态管理框架GetX
xiangzhihong8的专栏
09-26 1549
在Flutter的状态管理框架中，主流的状态管理框架有四个：GetX（又称为Get）、BLoC、MobX、Provider。
React - 虚拟DOM 和 Diff 算法
kelly0721的博客
10-01 2092
虚拟DOM 和 Diff 算法
Vue源码全面解析：指令、生命周期、虚拟DOM、diff算法
2. Vue源码探秘之虚拟DOM和diff算法 3. Vue源码探秘之数据响应式原理 4. vue源码解析之mustache模版引擎 5. Vue源码探秘之AST抽象语法树 根据这些文件名称，我们可以详细解释每个部分的知识点： 1. **Vue源码探秘...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值