Vue源码笔记 — 数据驱动--update

Vue版本：2.5.17-beta.0

在《Vue源码笔记 — 数据驱动--Vue实例挂载》中最后提到过，Vue实例挂载最终是通过 vm._update(vm._render(), hydrating) 挂载到最终dom上，而在《Vue源码笔记 — 数据驱动--render》中记录 vm._render() 方法主要是调用 vm.$createElement 返回 vnode 数据，接下来记录普通节点调用 vm._update 过程。

以下示例，传入普通节点进行渲染挂载到dom上：

new Vue({
  el: '#app',
  data () {
    return {
      message: 'Hello Vue!'
    }
  },
  render (h) {
    return h('div', {
      attrs: { id: 'app' }
    }, this.message)
  }
})

vm._update 原型方法是在 src/core/instance/lifecycle.js 文件中，源码如下：

export let activeInstance: any = null

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const prevActiveInstance = activeInstance
    // 记录当前 vm 实例
    activeInstance = vm
    vm._vnode = vnode // 渲染vnode
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    if (!prevVnode) {
      // initial render
      // 首次渲染传入真实 dom
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    activeInstance = prevActiveInstance
    // update __vue__ reference
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    // if parent is an HOC, update its $el as well
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook.
}

上述源码可看出，先定义了三个变量 prevEl、prevVnode、prevActiveInstance，而在首次渲染时 prevVnode、prevActiveInstance 都为空，prevEl = vm.$el 为真实的dom节点（在 mountComponent 方法中定的 vm.$el），接着定义 activeInstance 为当前实例，vm._vnode 为 vm._render() 方法返回的 vnode 对象。
至此可看出在首次渲染时，会走 if (!prevVnode) { ... } 中的逻辑调用 vm.__patch__，传入第一个参数为真实的dom节点，第二个参数为生成的vnode对象，而 vm.__patch__ 方法其实是在 src/platforms/web/runtime/index.js 文件中定义的原型方法：

Vue.prototype.__patch__ = inBrowser ? patch : noop

上述引入的 patch 是在 src/platforms/web/runtime/patch.js 文件中，源码如下：、

import * as nodeOps from 'web/runtime/node-ops'
import { createPatchFunction } from 'core/vdom/patch'
import baseModules from 'core/vdom/modules/index'
import platformModules from 'web/runtime/modules/index'

// the directive module should be applied last, after all
// built-in modules have been applied.
const modules = platformModules.concat(baseModules)

export const patch: Function = createPatchFunction({ nodeOps, modules })

上述源码可看出最终定义的 path 方法其实是调用 createPatchFunction 生成，而传入的 nodeOps 选项是一个集合，对真实dom操作的api集合，modules 选项是在 patch 时对dom属性的一些操作，如 class、style等，所以 vm.__patch__ 其实是调用了 createPatchFunction 方法。
而 createPatchFunction 方法定义在 src/core/vdom/patch.js 文件中（因为源码太长就不全部显示了），最终返回了一个 patch 方法，源码如下：

return function patch (oldVnode, vnode, hydrating, removeOnly) {
    // 删除逻辑 子组件销毁
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }

    let isInitialPatch = false
    const insertedVnodeQueue = [] // 调用insert钩子使用

    // 子组件渲染时会走逻辑
    if (isUndef(oldVnode)) {
      // empty mount (likely as component), create new root element
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
    } else {
      // 判断是否为真实dom
      const isRealElement = isDef(oldVnode.nodeType) 
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
      } else {
        // 首次渲染为真实dom
        if (isRealElement) {
          // mounting to a real element
          // check if this is server-rendered content and if we can perform
          // a successful hydration.
          // 服务端渲染相关
          if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
            oldVnode.removeAttribute(SSR_ATTR)
            hydrating = true
          }
          // 服务端渲染相关
          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
          oldVnode = emptyNodeAt(oldVnode) // 将真实dom 转化成vnode对象
        }

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

        // create new node
        // 把vnode挂载到真实dom中
        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)
        }
      }
    }
    
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }

之前说过 vm._update 中的首次渲染调用的是 vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */) 其实就是调用上述源码的 path 方法，传入的第一个参数有值且为真实dom，所以不走 if (isUndef(oldVnode)) 逻辑，走 else 逻辑，其中定义的 isRealElement 为true，所以不走 if (!isRealElement && sameVnode(oldVnode, vnode))逻辑，走 else 逻辑，接着会走 if (isRealElement) 逻辑（服务端渲染相关相关逻辑省略）调用 emptyNodeAt 方法将真实dom转化成vnode对象，之后获取 oldElm、parentElm dom节点，调用 createElm 方法，此方法就是把vnode挂载到真实dom中，源码如下：

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.isRootInsert = !nested // for transition enter check
    // 尝试创建组件节点
    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
      return
    }

    const data = vnode.data
    const children = vnode.children
    const tag = vnode.tag
    // 插入顺序: 先子后父  最后父在挂载到文档dom上
    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.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 {
        // 判断子节点递归调用createElm 插入父dom中
        createChildren(vnode, children, insertedVnodeQueue)
        if (isDef(data)) {
          invokeCreateHooks(vnode, insertedVnodeQueue)
        }
        // 父挂载节点  当前vnode节点  参考节点
        // 组件时 parentElm为undefined 不做插入操作
        insert(parentElm, vnode.elm, refElm)
      }

      if (process.env.NODE_ENV !== 'production' && data && data.pre) {
        creatingElmInVPre--
      }
    } 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)
    }
}

上述源码的主要逻辑是，首先调用 createComponent 方法尝试创建组件节点，我们这里是普通节点所以返回为 undefined，接着从传入的vnode对象中获取 data、children、tag，分别对应的数据为 {attrs: {id: "app"}}、[VNode]（'Hello Vue!'文字vnode对象）和 div 标签，之后会判断 tag 并通过 nodeOps api创建真实dom，最后调用 insert 插入html中的父节点中，也就是传入的 parentElm 参数为html中的父节点。

createElm 方法运行完毕后，在 patch 方法最后会运行如下代码：

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

为什么要最后执行一次此方法，因为在 createElm 方法中插入的是新创建的dom节点，而html中旧的节点也就是 oldVnode 还存在，所以需要调用此方法判断删除旧的节点。

至此 vm._update 过程记录完毕。