vue2源码分析:patch函数

目录

1.patch函数的脉络

2.类vnode的设计

3.createPatch函数中的辅助函数和patch函数

4.源码运行展现(DEMO)

一.patch函数的脉络

首先梳理一下patch函数的脉络。

第一，patch核心函数createPatchFunction，

而后，runtime/index.js中将patch方法挂载到vue的原型属性__patch__上。

 

Vue.prototype.__patch__ = inBrowser ? patch : noop

 

最后patch的使用是当咱们调用vue实例的$el时，即调用patch函数。

if (!prevVnode) { // initial render
  vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */) } else { // updates
  vm.$el = vm.__patch__(prevVnode, vnode) }

其中，createPatchFunction函数结构

export function createPatchFunction (backend) { let i, j const cbs = {} const { modules, nodeOps } = backend; ,,,hooks和modules的 for循环 其中const hooks = ['create', 'activate', 'update', 'remove', 'destroy'] 一些辅助函数 emptyNodeAt，createRmCb，removeNode，isUnknownElement，createElm，createComponent ，
 initComponent，reactivateComponent， insert， createChildren ,isPatchable ,setScope ,
addVnodes ,invokeDestroyHook , removeVnodes , removeAndInvokeRemoveHook,updateChildren, 
checkDuplicateKeys, findIdxInOld , patchVnode , invokeInsertHook ,hydrate, assertNodeMatch 核心函数return patch }

第一，要了解createPatchFunction的参数backend。backend的nodeOps是节点的功能函数，包括createElement建立元素、removeChild删除子元素，tagName获取到标签名等，backend的modules是vue框架用于分别执行某个渲染任务的功能函数。

 

 

 根据详细的截图，能够看到每一个模块完成某个功能，属性和类、监听器、DOM属性、样式的建立和更新、指令更新以及其余操做

 咱们知道vue虚拟DOM的比较依赖于diff算法，diff算法到底有什么魔法能快速比较出文本的差别？咱们能够手动的写一个简易的函数实现diff算法。具体可参照https://www.cnblogs.com/MRRAOBX/articles/10043258.html。

首先，咱们先假设一个需求。

<div class = "box">
    <ul>
        <li> hello,everyone!</li>
    </ul>
</div>

var list = document.querySelector( '.list' )
var li = document.createElement( 'LI' )
li.innerHTML = ' 疫情尚未结束 '

list.appendChild( li )

咱们用一个vdom对象模拟上述html结构，并经过render函数渲染出来。而后 数据更改了，data.name = ‘疫情终于结束了’

var vdom = {
      tag: 'div',
      attr: {
        className: 'box'
      },
      content: [
        {
          tag: 'ul',
          content: [
            {
              tag: 'li',
              content: data.name
           }
          ]
         }
      ]
    }

那么咱们经过diff算法比对两次vdom,生成patch对象，最终实现了打补丁。

 

二.类vnode的设计

VNode类定义了不少属性。

export default class VNode { tag: string | void; data: VNodeData | void; // VNode类定义了属性tag
 constructor (){} ....... }

同时提供了提供了一些功能，createEmptyVNode建立空的VNode，createTextVNode建立文本类型的VNode，cloneVNode克隆VNode。

为了方便咱们更好的理解这个属性，咱们能够运行源码，打印一下这个Vnode。咱们是否是能够看到最重要的属性就是tag(标签名)、data(标签的属性-值)、children(全部后代元素)、context(上下文对象)。

 

 

 附个人html结构

<div id="app">
<div></div>
  。。。。。。
</div>

三.createPatch函数中的辅助函数和patch函数

createPatch函数包括有关VNode增删改查的功能函数

//返回的e
function emptyNodeAt (elm) { return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm) } //使用它的地方只有一个
 oldVnode = emptyNodeAt(oldVnode);

emptyNodeAt包装oldVnode先后有什么区别呢？依然是运行源码，咱们发现传入的参数是dom元素，包装后变成了VNode，即vue形式的节点实例。

 

 

 createRmCb功能是建立remove函数
remove$$1函数做为一个对象，第一个参数是vnode所属的dom元素，第二个参数是监听器个数。内部实现remove函数拥有listeners属性，等到这个属性的值每一次减小直到0时将直接移除节点。这个原理很简单，要移除某个节点，先要把监听器一个一个的所有移除掉。

rm = createRmCb(vnode.elm, listeners); //只有一个地方使用了createRmCb
'function createRmCb (childElm, listeners) { function remove$$1 () { if (--remove$$1.listeners === 0) { removeNode(childElm); } } remove$$1.listeners = listeners; return remove$$1 }

removeNode移除节点，先找到父节点，而后经过removeChild移除掉这个节点。那么为何要这样操做呢？由于这里的removeChild是原生方法中移除的惟一作法。

function removeNode (el) {
    const parent = nodeOps.parentNode(el)
    // element may have already been removed due to v-html / v-text
    if (isDef(parent)) {
      nodeOps.removeChild(parent, el)
    }
  }

function removeChild (node, child) {
    node.removeChild(child);
  }isUnknownElement略。

create***函数
createElm第一个参数是vue node实例，在vnode.js文件中咱们已经知道了vnode类的具体状况，第二个参数是数组，表示插入的vnode实例的队列，第三个参数是parentElm父元素，毕竟原生的
添加元素惟一的方法是先找到父元素，而后appendChild添加元素。第4个参数是refElm，若是子元素包含ref属性的节点，那么这个参数就有值。第5个参数是nested，值是true或者false.第5个
参数是ownerArray，它是当前节点和兄弟节点组成的数组。第6个是index索引。

function createElm ( vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArray, index ) {

 if (isDef(vnode.elm) && isDef(ownerArray)) {
      // This vnode was used in a previous render!
      // now it's used as a new node, overwriting its elm would cause
      // potential patch errors down the road when it's used as an insertion
      // reference node. Instead, we clone the node on-demand before creating
      // associated DOM element for it.
      vnode = ownerArray[index] = cloneVNode(vnode)
    }

首先咱们对某一种类型的vnode进行了调整。通常状况下vnode的elm都有定义，不过当我用vnode.elm打印时返回undefined(具体缘由还不知道，明明打印出来的vnode的elm属性的呀)。另外，ownerArray有哪些元素不会定义呢，答案是vue项目挂载app的根元素。这样一来，普通的vnode都不会进入这个if语句。

vnode.isRootInsert = !nested // for transition enter check //根据注释，它跟vue画面的渐进效果有关
    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) { return } //若是是建立组件，那么直接返回

具体看后面createComponent的功能咯。

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) { creatingElmInVPre++ } if (isUnknownElement(vnode, creatingElmInVPre)) { warn( 'Unknown custom element: <' + tag + '> - did you ' +
            'register the component correctly? For recursive components, ' +
            'make sure to provide the "name" option.', vnode.context ) } }

这一段就是把须要的数据从vnode中取出来，咱们上面已经打印过vnode了，复习一下，data 是有关元素key-value的数据信息，chidren是后代元素，tag是标签名。并有针对开发环境的调试信息。

vnode.elm = vnode.ns ? nodeOps.createElementNS(vnode.ns, tag) : nodeOps.createElement(tag, vnode) setScope(vnode) //namespce命名空间

接下来，weex直接略过。、

 else {
        createChildren(vnode, children, insertedVnodeQueue)
        if (isDef(data)) {
          invokeCreateHooks(vnode, insertedVnodeQueue)
        }
        insert(parentElm, vnode.elm, refElm)
      }

那么咱们看到建立元素调用的核心函数是createChildren和insert。

function createChildren (vnode, children, insertedVnodeQueue) { //若
    if (Array.isArray(children)) { if (process.env.NODE_ENV !== 'production') { checkDuplicateKeys(children) } //       for (let i = 0; i < children.length; ++i) { createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i) } } //若是是原生类型
else if (isPrimitive(vnode.text)) { nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text))) } }

createChildren

function insert (parent, elm, ref) { if (isDef(parent)) { if (isDef(ref)) { if (nodeOps.parentNode(ref) === parent) { nodeOps.insertBefore(parent, elm, ref) } } else { nodeOps.appendChild(parent, elm) } } } function appendChild (node, child) { node.appendChild(child); } function insertBefore (parentNode, newNode, referenceNode) { parentNode.insertBefore(newNode, referenceNode); }

insert

function insert (parent, elm, ref) { if (isDef(parent)) { if (isDef(ref)) { //若ref节点的父元素等于该元素的父元素
        if (nodeOps.parentNode(ref) === parent) { //那么经过insertBefore方法将元素ref插入到elm以前
 nodeOps.insertBefore(parent, elm, ref) } } else { //添加元素elm
 nodeOps.appendChild(parent, elm) } } } //调用insert的例子
vnode.elm = nodeOps.createComment(vnode.text) insert(parentElm, vnode.elm, refElm)

到底vue是如何建立元素的？咱们用简单的html结构看一下createElm究竟是如何运行的(我经过源码打断点的方式来看到底发生了什么)

new Vue({ el:"#app",} ); //html结构
<div id="app">
        <span>123</span>
</div>

 

vue项目初始化时首先建立div#app的节点。vnode是div#app的vnode,insertedVnodeQueue为空数组，parentElm是body元素，refElm如图，refElm究竟是什么？它是一个文本节点。

wholeText: "↵"
assignedSlot: null
data: "↵"
length: 1
previousElementSibling: div#app
nextElementSibling: script
nodeType: 3
nodeName: "#text"
baseURI: "http://localhost:63342/vuesrc/1.vue.set%E4%BD%BF%E7%94%A8.html?_ijt=clboq4te5mp0i755tqhvsc3q75"
isConnected: true
ownerDocument: document
parentNode: body
parentElement: body
childNodes: NodeList []
firstChild: null
lastChild: null
previousSibling: div#app
nextSibling: script
nodeValue: "↵"
textContent: "↵"
__proto__: Text

第二个建立的元素是span。span的refElm是null,nested为true。

 

 第三个建立的是123所表明的文本节点。

 

 咱们看到当vue项目要加载某些节点时都会调用它。

createComponent的使用在createElm这一行有这个判断。

 if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) { return }

 function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
      var i = vnode.data;
      if (isDef(i)) {
        var isReactivated = isDef(vnode.componentInstance) && i.keepAlive;
        if (isDef(i = i.hook) && isDef(i = i.init)) {
          i(vnode, false /* hydrating */);
        }
        // after calling the init hook, if the vnode is a child component
        // it should've created a child instance and mounted it. the child
        // component also has set the placeholder vnode's elm.
        // in that case we can just return the element and be done.
        if (isDef(vnode.componentInstance)) {
          initComponent(vnode, insertedVnodeQueue);
          insert(parentElm, vnode.elm, refElm);
          if (isTrue(isReactivated)) {
            reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm);
          }
          return true
        }
      }
    }

首先是div#app元素。
在createComponent中判断vnode.data。div#app判断isDef(i)为true。

var isReactivated = isDef(vnode.componentInstance) && i.keepAlive;

 

isReactivated和判断hook和init的if都会返回false。第二个if因为componentInstance: undefined也会false。

 var isReactivated = isDef(vnode.componentInstance) && i.keepAlive;
        if (isDef(i = i.hook) && isDef(i = i.init)) {

第二是span以及文本节点，他们因为data未定义，因此并不会进入外层if语句。

isPatchable

function isPatchable (vnode) {
    while (vnode.componentInstance) {
      vnode = vnode.componentInstance._vnode
    }
    return isDef(vnode.tag)
  }

invokeCreateHooks

div#app的建立时会调用invokeCreateHooks

 

 

 cbs的内容是

create: (8) [ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ]
activate: [ƒ]
update: (7) [ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ]
remove: [ƒ]
destroy: (2) [ƒ, ƒ]
__proto__: Object
。。。。

create: Array(8)
0: ƒ updateAttrs(oldVnode, vnode)
1: ƒ updateClass(oldVnode, vnode)
2: ƒ updateDOMListeners(oldVnode, vnode)
3: ƒ updateDOMProps(oldVnode, vnode)
4: ƒ updateStyle(oldVnode, vnode)
5: ƒ _enter(_, vnode)
6: ƒ create(_, vnode)
7: ƒ updateDirectives(oldVnode, vnode)
length: 
__proto__: Array(0)

那么函数调用后发生了什么呢？cbs.create是一个函数做为成员的数组，遍历每一个成员调用，咱们以其中一个成员函数来看看发生了什么，updateAttrs(emptyNode,vnode)。

function invokeCreateHooks (vnode, insertedVnodeQueue) {
    for (let i = 0; i < cbs.create.length; ++i) {
      cbs.create[i](emptyNode, vnode)
    }
    i = vnode.data.hook // Reuse variable
    if (isDef(i)) {
      if (isDef(i.create)) i.create(emptyNode, vnode)
      if (isDef(i.insert)) insertedVnodeQueue.push(vnode)
    }
  }

咱们找到updateAttrs方法。

function updateAttrs (oldVnode, vnode) {
    var opts = vnode.componentOptions;
    if (isDef(opts) && opts.Ctor.options.inheritAttrs === false) {
      return
    }
    if (isUndef(oldVnode.data.attrs) && isUndef(vnode.data.attrs)) {
      return
    }
    var key, cur, old;
    var elm = vnode.elm;
    var oldAttrs = oldVnode.data.attrs || {};
    var attrs = vnode.data.attrs || {};
    // clone observed objects, as the user probably wants to mutate it
    if (isDef(attrs.__ob__)) {
      attrs = vnode.data.attrs = extend({}, attrs);
    }
     //核心代码，setAttr设置新节点的属性
    for (key in attrs) {
      cur = attrs[key];
      old = oldAttrs[key];
      if (old !== cur) {
        setAttr(elm, key, cur);
      }
    }
    // #4391: in IE9, setting type can reset value for input[type=radio]
    // #6666: IE/Edge forces progress value down to 1 before setting a max
    /* istanbul ignore if */
    if ((isIE || isEdge) && attrs.value !== oldAttrs.value) {
      setAttr(elm, 'value', attrs.value);
    }
   //核心代码，删除纠结点的属性
    for (key in oldAttrs) {
      if (isUndef(attrs[key])) {
        if (isXlink(key)) {
          elm.removeAttributeNS(xlinkNS, getXlinkProp(key));
        } else if (!isEnumeratedAttr(key)) {
          elm.removeAttribute(key);
        }
      }
    }
  }

function setAttr (el, key, value) {
    if (el.tagName.indexOf('-') > -1) {
      baseSetAttr(el, key, value);
    } else if (isBooleanAttr(key)) {
      // set attribute for blank value
      // e.g. <option disabled>Select one</option>
      if (isFalsyAttrValue(value)) {
        el.removeAttribute(key);
      } else {
        // technically allowfullscreen is a boolean attribute for <iframe>,
        // but Flash expects a value of "true" when used on <embed> tag
        value = key === 'allowfullscreen' && el.tagName === 'EMBED'
          ? 'true'
          : key;
        el.setAttribute(key, value);
      }
    } else if (isEnumeratedAttr(key)) {
      el.setAttribute(key, convertEnumeratedValue(key, value));
    } else if (isXlink(key)) {
      if (isFalsyAttrValue(value)) {
        el.removeAttributeNS(xlinkNS, getXlinkProp(key));
      } else {
        el.setAttributeNS(xlinkNS, key, value);
      }
    } else {
      baseSetAttr(el, key, value);
    }
  }

setAttr

function baseSetAttr (el, key, value) {
    if (isFalsyAttrValue(value)) {
      el.removeAttribute(key);
    } else {
      // #7138: IE10 & 11 fires input event when setting placeholder on
      // <textarea>... block the first input event and remove the blocker
      // immediately.
      /* istanbul ignore if */
      if (
        isIE && !isIE9 &&
        el.tagName === 'TEXTAREA' &&
        key === 'placeholder' && value !== '' && !el.__ieph
      ) {
        var blocker = function (e) {
          e.stopImmediatePropagation();
          el.removeEventListener('input', blocker);
        };
        el.addEventListener('input', blocker);
        // $flow-disable-line
        el.__ieph = true; /* IE placeholder patched */
      }
      el.setAttribute(key, value);
    }
  }

而后就是data.hook有没有定义。要是定义了，那就调用create或者insert方法。
setScope

function setScope (vnode) {
    let i
    if (isDef(i = vnode.fnScopeId)) {
      nodeOps.setStyleScope(vnode.elm, i)
    } else {
      let ancestor = vnode
      while (ancestor) {
        if (isDef(i = ancestor.context) && isDef(i = i.$options._scopeId)) {
          nodeOps.setStyleScope(vnode.elm, i)
        }
        ancestor = ancestor.parent
      }
    }
    // for slot content they should also get the scopeId from the host instance.
    if (isDef(i = activeInstance) &&
      i !== vnode.context &&
      i !== vnode.fnContext &&
      isDef(i = i.$options._scopeId)
    ) {
      nodeOps.setStyleScope(vnode.elm, i)
    }
  }

addVnodes

 function addVnodes (parentElm, refElm, vnodes, startIdx, endIdx, insertedVnodeQueue) {
    for (; startIdx <= endIdx; ++startIdx) {
      createElm(vnodes[startIdx], insertedVnodeQueue, parentElm, refElm, false, vnodes, startIdx)
    }
  }

invokeDestroyHook

function invokeDestroyHook (vnode) {
    let i, j
    const data = vnode.data
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode)
      for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode)
    }
    if (isDef(i = vnode.children)) {
      for (j = 0; j < vnode.children.length; ++j) {
        invokeDestroyHook(vnode.children[j])
      }
    }
  }

destroy调用其实是调用的function destory以及unbindDirectives 。那么功能是销毁咯。

destroy: Array(2)
0: ƒ destroy(vnode)
1: ƒ unbindDirectives(vnode)

destroy: function destroy (vnode) {
      var componentInstance = vnode.componentInstance;
      if (!componentInstance._isDestroyed) {
        if (!vnode.data.keepAlive) {
          componentInstance.$destroy();
        } else {
          deactivateChildComponent(componentInstance, true /* direct */);
        }
      }
    }

 destroy: function unbindDirectives (vnode) {
      updateDirectives(vnode, emptyNode);
    }

removeVnodes删除vnode作了哪些事情，删除hook，删除元素。

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)
        }
      }
    }
  }

removeNode的原生方法其实就是removeChild。

function removeNode (el) {
      var parent = nodeOps.parentNode(el);
      // element may have already been removed due to v-html / v-text
      if (isDef(parent)) {
        nodeOps.removeChild(parent, el);
      }
    }

rm一开始为undefined，经过 rm = createRmCb(vnode.elm, listeners) 建立了remove函数。

 

 

 

 核心代码是 cbs.remove[i](vnode, rm) 其实就回到了remove函数这里。

function remove () {
      if (--remove.listeners === 0) {
        removeNode(childElm)
      }
    }

updateChildren

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 (process.env.NODE_ENV !== 'production') {
      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(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }
  }

checkDkeys

function checkDuplicateKeys (children) {
    const seenKeys = {}
    for (let i = 0; i < children.length; i++) {
      const vnode = children[i]
      const key = vnode.key
      if (isDef(key)) {
        if (seenKeys[key]) {
          warn(
            `Duplicate keys detected: '${key}'. This may cause an update error.`,
            vnode.context
          )
        } else {
          seenKeys[key] = true
        }
      }
    }
  }

findIdsInOld

function findIdxInOld (node, oldCh, start, end) {
    for (let i = start; i < end; i++) {
      const c = oldCh[i]
      if (isDef(c) && sameVnode(node, c)) return i
    }
  }

patchVnode

function patchVnode (
    oldVnode,
    vnode,
    insertedVnodeQueue,
    ownerArray,
    index,
    removeOnly
  ) {
    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 (process.env.NODE_ENV !== 'production') {
          checkDuplicateKeys(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)
    }
  }

invokeInsertHook

function invokeInsertHook (vnode, queue, initial) {
    // delay insert hooks for component root nodes, invoke them after the
    // element is really inserted
    if (isTrue(initial) && isDef(vnode.parent)) {
      vnode.parent.data.pendingInsert = queue
    } else {
      for (let i = 0; i < queue.length; ++i) {
        queue[i].data.hook.insert(queue[i])
      }
    }
  }

assertNodeMatch

function assertNodeMatch (node, vnode, inVPre) {
    if (isDef(vnode.tag)) {
      return vnode.tag.indexOf('vue-component') === 0 || (
        !isUnknownElement(vnode, inVPre) &&
        vnode.tag.toLowerCase() === (node.tagName && node.tagName.toLowerCase())
      )
    } else {
      return node.nodeType === (vnode.isComment ? 8 : 3)
    }
  }

核心函数patch
首先，经过示例给patch函数打断点，咱们看到第一个参数是div#app dom元素，第二个参数是包含div#app信息的vnode。第一部分的代码并无进入if语句

if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }

    let isInitialPatch = false
    const insertedVnodeQueue = []

第二部分因为oldNode已经定义因此分支语句进入else分支。else分支首先处理若是oldVnode是元素的一些操做。而后createElm建立元素。第三，若是存在父元素，对祖先元素遍历，那么对祖先元素注册钩子函数，不然世界registerRef。 ancestor = ancestor.parent 是while循环的条件。接下来删除旧的节点。第四，invokeInsertHook。最后返回vnode的dom元素。

if (isUndef(oldVnode)){}else{
   //dom元素的nodeType为1，因此isDef返回true
   const isRealElement = isDef(oldVnode.nodeType)
      
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
      }
       //!isRealElement为false，进入else分支
 else {
        if (isRealElement) {
          // mounting to a real element
          // check if this is server-rendered content and if we can perform
          // a successful hydration.
          //根据var SSR_ATTR = 'data-server-rendered'，咱们看到若是是服务端渲染
          //那么元素移除掉SSR-ATTR属性，而且hydrating设置为true
          if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
            oldVnode.removeAttribute(SSR_ATTR)
            hydrating = true
          }
          //若是咱们要设置hydrating，那么就插入钩子函数
          if (isTrue(hydrating)) {
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
              invokeInsertHook(vnode, insertedVnodeQueue, true)
              return oldVnode
            } else if (process.env.NODE_ENV !== 'production') {
              warn(
                'The client-side rendered virtual DOM tree is not matching ' +
                'server-rendered content. This is likely caused by incorrect ' +
                'HTML markup, for example nesting block-level elements inside ' +
                '<p>, or missing <tbody>. Bailing hydration and performing ' +
                'full client-side render.'
              )
            }
          }
          // either not server-rendered, or hydration failed.
          // create an empty node and replace it
          //emptyNodeAt将oldVnode包装一下
          oldVnode = emptyNodeAt(oldVnode)
        }

        // replacing existing element
        const oldElm = oldVnode.elm
        const parentElm = nodeOps.parentNode(oldElm)

        // 建立新节点create new node
        createElm(
          vnode,
          insertedVnodeQueue,
          // extremely rare edge case: do not insert if old element is in a
          // leaving transition. Only happens when combining transition +
          // keep-alive + HOCs. (#4590)
          oldElm._leaveCb ? null : parentElm,
          nodeOps.nextSibling(oldElm)
        )

        // update parent placeholder node element, recursively
        if (isDef(vnode.parent)) {
          let ancestor = vnode.parent
          const patchable = isPatchable(vnode)
          while (ancestor) {
            for (let i = 0; i < cbs.destroy.length; ++i) {
              cbs.destroy[i](ancestor)
            }
            ancestor.elm = vnode.elm
            if (patchable) {
              for (let i = 0; i < cbs.create.length; ++i) {
                cbs.create[i](emptyNode, ancestor)
              }
              // #6513
              // invoke insert hooks that may have been merged by create hooks.
              // e.g. for directives that uses the "inserted" hook.
              const insert = ancestor.data.hook.insert
              if (insert.merged) {
                // start at index 1 to avoid re-invoking component mounted hook
                for (let i = 1; i < insert.fns.length; i++) {
                  insert.fns[i]()
                }
              }
            } else {
              registerRef(ancestor)
            }
            ancestor = ancestor.parent
          }
        }

        // destroy old node
        if (isDef(parentElm)) {
          removeVnodes(parentElm, [oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          invokeDestroyHook(oldVnode)
        }
      }
}

四.源码运行展现

虚拟DOM并不能改变DOM操做自己很慢的状况，它经过对象模拟DOM节点，它的优化点有两个部分

1. 初始化文档结构时，先js构建出一个真实的DOM结构，而后再插入文档。

2. 更新试图时，将新旧节点树比较计算出最小变动而后再映射到真实的DOM中。这在大量、频繁的更新数据时有很大的优点。

这也是patch函数的功能。

DEMO1.初次渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue初次渲染</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>{{obj}}</span>
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
                obj:"012"
        },
        created:function(){
            this.obj="567";
        },
        methods:{
           addName(){
               this.obj2=this.obj2+"456"
           }
        }
    })
</script>
</body>
</html>

咱们把vue.js打断点。

首先在function lifecycleMixin 中调用 vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */); 

其中  Vue.prototype.__patch__ = inBrowser ? patch : noop; 目前咱们只考虑浏览器有DOM的状况。vm.$el就是div#app节点，vnode是div#app包装成的虚拟节点。

而后执行patch函数，

 if (isUndef(vnode)) {
        if (isDef(oldVnode)) { invokeDestroyHook(oldVnode); }
        return
      }

      var isInitialPatch = false;
      var insertedVnodeQueue = [];

      if (isUndef(oldVnode)) {
        // empty mount (likely as component), create new root element
        isInitialPatch = true;
        createElm(vnode, insertedVnodeQueue);
      } 
//这些逻辑都不会进入

因为oldNode参数是div#app，它是真正的元素节点，emptyNodeAt以后什么变化呢？它将dom节点变成虚拟节点。

if (isRealElement) {
            //SSR渲染的逻辑略过。
            oldVnode = emptyNodeAt(oldVnode);
          
}

而后createElm，这个函数的核心代码是 insert(parentElm, vnode.elm, refElm) 那么咱们的节点vnode.elm就插入了DOM中。

          var oldElm = oldVnode.elm;
          var parentElm = nodeOps.parentNode(oldElm);

          // create new node建立新节点
          createElm(
            vnode,
            insertedVnodeQueue,
            // extremely rare edge case: do not insert if old element is in a
            // leaving transition. Only happens when combining transition +
            // keep-alive + HOCs. (#4590)
            oldElm._leaveCb ? null : parentElm,
            nodeOps.nextSibling(oldElm)
          );

function insert (parent, elm, ref) {
    if (isDef(parent)) {
      if (isDef(ref)) {
        if (nodeOps.parentNode(ref) === parent) {

          nodeOps.insertBefore(parent, elm, ref)
        }
      } else {
        nodeOps.appendChild(parent, elm)
      }
    }
  }
//经过insertBefore或者appendChild添加元素

 因为vue项目挂载的节点的parent为undefined，因此 if (isDef(vnode.parent)) { 为false不进入。

 而后挂载的节点的父元素是body，存在即true，那么删除旧的节点。

if (isDef(parentElm)) {
removeVnodes(parentElm, [oldVnode], 0, 0)
        } 

为何要删除旧的节点？

由于createElm加入的节点是与虚拟DOM关联的节点，浏览器自己还有渲染节点的。从图示打断点，当运行到removeVnodes时，这个时候还未删除就出现了两行元素。当咱们运行完全部代码后才能显示正常结果。

 

 正常结果图示

 

 最后 invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) 将队列中的钩子函数插入到队列的hook中。

function invokeInsertHook (vnode, queue, initial) {
      // delay insert hooks for component root nodes, invoke them after the
      // element is really inserted
      if (isTrue(initial) && isDef(vnode.parent)) {
        vnode.parent.data.pendingInsert = queue;
      } else {
        for (var i = 0; i < queue.length; ++i) {
          queue[i].data.hook.insert(queue[i]);
        }
      }
    }

DEMO2.

需求是咱们要展现一个个产品列表，并且咱们这个DEMO使用模块化开发的方式。咱们首先来看一看初次渲染的状况。

先上代码。目录结构是vue官方脚手架。

 

 

 核心代码是

//App.vue
<template>
  <div>
    <img src="./assets/logo.png">
    <ul>
      <li v-for="item in items">
        {{ item.message }}---{{item.id}}
      </li>
    </ul>
    <!--<router-view/>-->
  </div>
</template>

<script>
  import  Vue from "vue"
export default {
  name: 'App',

  data(){
    return{
      items:[
        {id:1101,message:"VERSACE范思哲"},
        {id:1102,message:"GUCCI古驰男士经典蜜蜂刺绣"},
        {id:1103,message:"BURBERRY巴宝莉男士休闲长袖衬衫"},
        {id:1104,message:"BALLY巴利奢侈品男包"},
        {id:1105,message:"FERRAGAMO菲拉格慕男款休闲皮鞋"}
      ]
    }
  },
  methods:{
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
  li{
    list-style: none;
  }
</style>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

咱们依然在Sources面板找到模块中vue源码打断点。

 

 

oldNode的结构是

 

 

 vnode的结构是

 

 

 

 

 

 

 咱们看到vnode的tag名称是vue-component-4-App。

if (isUndef(vnode)) {
      if (isDef(oldVnode)) { invokeDestroyHook(oldVnode); }
      return
    }

    var isInitialPatch = false;
    var insertedVnodeQueue = [];
//打头的代码，逻辑不会进入

 if (isUndef(oldVnode)) {
      // empty mount (likely as component), create new root element
      isInitialPatch = true;
      createElm(vnode, insertedVnodeQueue);
    } else {
    //核心代码
     oldVnode = emptyNodeAt(oldVnode);
}

emptyNodeAt将原有的节点，同时也是DOM节点包装成虚拟节点。

 // replacing existing element
        var oldElm = oldVnode.elm;
        var parentElm = nodeOps.parentNode(oldElm);
//parentElm是undefined
//建立新节点
        createElm(
          vnode,
          insertedVnodeQueue,
          // extremely rare edge case: do not insert if old element is in a
          // leaving transition. Only happens when combining transition +
          // keep-alive + HOCs. (#4590)
          oldElm._leaveCb ? null : parentElm,
          nodeOps.nextSibling(oldElm)
        );

进入createElm函数。vnode是tag名为vue-component-4-App的虚拟节点。parentElm是body元素。

 

 

 createElm函数中因为ownerArray等于undefined，因此打头的if语句为false。接下来到createComponent函数。

if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
      return
    }

 

 

 

 

 

 

if (isDef(i)) {
      var isReactivated = isDef(vnode.componentInstance) && i.keepAlive;
       //根据vnode.data的结构，经过赋值，i调用的是init钩子函数。
      if (isDef(i = i.hook) && isDef(i = i.init)) {
        i(vnode, false /* hydrating */);
      }
      // after calling the init hook, if the vnode is a child component
      // it should've created a child instance and mounted it. the child
      // component also has set the placeholder vnode's elm.
      // in that case we can just return the element and be done.
      if (isDef(vnode.componentInstance)) {
        initComponent(vnode, insertedVnodeQueue);
        insert(parentElm, vnode.elm, refElm);
        if (isTrue(isReactivated)) {
          reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm);
        }
        return true
      }
    }

那么初始化init钩子函数调用，  child.$mount(hydrating ? vnode.elm : undefined, hydrating); 因为hydrating为false,进而进入mount函数。

 

 

 

 

 

 mountComponent执行了 callHook(vm, 'beforeMount'); 而后运行了update。接下来挂载了watcher。

 updateComponent = function () {
      vm._update(vm._render(), hydrating);
    };

new Watcher(vm, updateComponent, noop, {
    before: function before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate');
      }
    }
  }, true /* isRenderWatcher */);

而后又回到了createElm函数。

 

 

 这里的vnode指的是template中的包裹元素。它的父元素是刚才的tag为vue-component-4-App的元素。

//vnode结构
child: (...)
tag: "div"
data: undefined
children: (3) [VNode, VNode, VNode]
text: undefined
elm: undefined
ns: undefined
context: VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
fnContext: undefined
fnOptions: undefined
fnScopeId: undefined
key: undefined
componentOptions: undefined
componentInstance: undefined
parent: VNode {tag: "vue-component-4-App", data: {…}, children: undefined, text: undefined, elm: undefined, …}
raw: false
isStatic: false
isRootInsert: true
isComment: false
isCloned: false
isOnce: false
asyncFactory: undefined
asyncMeta: undefined
isAsyncPlaceholder: false
__proto__: Object

<template>
  <div>
    <img src="./assets/logo.png">
    <ul>
      <li v-for="item in items">
        {{ item.message }}---{{item.id}}
      </li>
    </ul>
    <!--<router-view/>-->
  </div>
</template>

这时 createChildren(vnode, children, insertedVnodeQueue); 建立各个子元素。经过遍历，最终会将全部子元素经过insert添加到tag为vue-component-4-App的元素上。

 

 

 最终patch函数返回 return vnode.elm 节点。

 

 

 

 

 

 

 

 

 

 

 

 

 从这个分析能够看到初次渲染，会把全部节点最终加入template中的div元素，等到了tag为vue-component-4-App的元素，因为isDef(parentElm)的parentElm为body元素，因此为true。这个时候也能够看到DOM元素有两份，那么就要删除旧的元素  removeVnodes(parentElm, [oldVnode], 0, 0); 。最终运行完毕，呈现正确的DOM结构。

当尚未运行removeVnodes时DOM结构如截图2。

图1

 

图2

 

 

 运行完removeVnodes后原有的div#app就被删除了。

 

 初次渲染咱们也能够看到，老是把全部子元素构成的render树渲染好了再一次性添加到文档中。

 

 DEMO3

需求是ul中动态删除某个li标签。咱们知道要使用惟一ID的key，才能更高效的渲染。咱们能够来看一下patch函数中到底发生了什么？

其余内容同DEMO2，也是按模块化开发来的。

//App.vue
<template>
  <div>
    <img src="./assets/logo.png">
    <ul>
      <li v-for="item in items">
        {{ item.message }}---{{item.id}}
      </li>
    </ul>
    <button v-on:click="addItem()">添加item</button>
    <!--<router-view/>-->
  </div>
</template>

<script>
  import  Vue from "vue"
export default {
  name: 'App',

  data(){
    return{
      items:[
        {id:1101,message:"VERSACE范思哲"},
        {id:1102,message:"GUCCI古驰男士经典蜜蜂刺绣"},
        {id:1103,message:"BURBERRY巴宝莉男士休闲长袖衬衫"},
        {id:1104,message:"BALLY巴利奢侈品男包"},
        {id:1105,message:"FERRAGAMO菲拉格慕男款休闲皮鞋"}
      ]
    }
  },
  methods:{
    addItem(){

this.items.splice(2,1,{id:1106,message:"GUCCI古奇新款小蜜蜂刺绣低帮休闲板鞋男"})

} } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } li{ list-style: none; } </style>

 点击按钮 this.items.splice(2,1) 就会添加一个item。

咱们此次在function  renderList打断点。

//App.vue
<template>
  <div>
    <img src="./assets/logo.png">
    <ul>
      <li v-for="item in items" >
        {{ item.message }}---{{item.id}}
      </li>
    </ul>
    <button v-on:click="addItem()">添加item</button>
    <!--<router-view/>-->
  </div>
</template>

<script>
  import  Vue from "vue"
export default {
  name: 'App',

  data(){
    return{
      items:[
        {id:1101,message:"VERSACE范思哲"},
        {id:1102,message:"GUCCI古驰男士经典蜜蜂刺绣"},
        {id:1103,message:"BURBERRY巴宝莉男士休闲长袖衬衫"},
        {id:1104,message:"BALLY巴利奢侈品男包"},
        {id:1105,message:"FERRAGAMO菲拉格慕男款休闲皮鞋"}
      ]
    }
  },
  methods:{
    addItem(){
      this.items.push({id:1106,message:"GUCCI古奇新款小蜜蜂刺绣低帮休闲板鞋男"});
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
  li{
    list-style: none;
  }
</style>

 

首先看初次渲染时的参数状况。val为包含5个子元素的类数组。进入第一个if分支，render返回li标签的虚拟节点，节点含有而且含有key属性，并添加到ret数组。

if (Array.isArray(val) || typeof val === 'string') {
    ret = new Array(val.length);
    for (i = 0, l = val.length; i < l; i++) {
      ret[i] = render(val[i], i);
    }
  }

 

 若是咱们push新的值，ret为6个元素了。那么接下来就会打断点运行到patchVnode，其中sameVnode经过key来比较是不是同一个节点。

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)
      )
    )
  )

//若是旧的虚拟节点和新的节点是相同的，那么不用做渲染。
if (oldVnode === vnode) {
      return
    }

 更详细的参考一些v-for指令的源码，这里只涉及patch函数相关的。