Vue 的 _update是实例的一个私有方法，它被调用的时机有2个，一个是首次渲染，一个是数据更新的时候；这一节我们只分析首次渲染的部分，数据更新部分会在之后的响应式原理的时候涉及。 _update 方法作用就是把Vnode 渲染成为真实的DOM，它定义在src/core/instance/lifecyle.js 当中：

_update 的核心就是调用 vm._patch_ 方法，这个方法实际上在不同的平台，比如在web和weex 上的定义是不一样的，因此在web平台中它定义在 src/platforms/web/runtime/index.js 中：

Vue.prototype.__patch__ = inBrowser ? patch : noop

可以看到，甚至在web平台上，是否是服务端渲染也会对这个方法产生影响，因为在服务端渲染渲染中，没有真实的浏览器DOM环境，所以不需要把VNode最终转换成DOM,因此是一个空函数，而在浏览器端渲染中，它指向了patch方法，它的定义在 src/platforms/web/runtime/patch.js 中：

该方法的定义是调用 createPatchFunction 方法的返回值，这里传入了一个对象，包含nodeOps 参数 和 moudles 参数。其中，nodeOps 封装了一系列DOM操作的方法，modules 定义了一些模块钩子函数的实现，我们这里先不详细介绍，来看一下 createPatchFunction 的实现，它定义在 src/core/vdom/patch.js 中：

const hooks = ['create', 'activate', 'update', 'remove', 'destroy']

export function createPatchFunction (backend) {
let i, j
const cbs = {}

const { modules, nodeOps } = backend

for (i = 0; i < hooks.length; ++i) {
cbs[hooks[i]] = []
for (j = 0; j < modules.length; ++j) {
if (isDef(modules[j][hooks[i]])) {
cbs[hooks[i]].push(modules[j][hooks[i]])
}
}
}

// ...

return function patch (oldVnode, vnode, hydrating, removeOnly) {
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}

let isInitialPatch = false
const insertedVnodeQueue = []

if (isUndef(oldVnode)) {
  // empty mount (likely as component), create new root element
  isInitialPatch = true
  createElm(vnode, insertedVnodeQueue)
} else {
  const isRealElement = isDef(oldVnode.nodeType)
  if (!isRealElement && sameVnode(oldVnode, vnode)) {
    // patch existing root node
    patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
  } else {
    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)
    }

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

invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
return vnode.elm

}
}

createPatchFunction 内部定义了一系列的辅助方法，最终返回了一个patch 方法，这个方法就赋值给了 vm._update 函数里调用的 vm._patch_。

在介绍 patch 的 方法实现之前，我们可以思考一下为何 Vue.js 源码绕了这么一大圈，把相关代码分散到各个目录。因为前面介绍过，patch 是平台相关的，在 Web 和 Weex 环境，它们把虚拟 DOM 映射到 “平台DOM” 的方法是不同的，并且对 “DOM” 包括的属性模块创建和更新也不尽相同。因此每个平台都有各自的 nodeOps 和 modules，它们的代码需要托管在 src/platforms 这个大目录下。

而不同平台的 patch 的主要逻辑部分是相同的，所以这部分公共的部分托管在 core 这个大目录下。差异化部分只需要通过参数来区别，这里用到了一个函数柯里化的技巧，通过 createPatchFunction 把差异化参数提前固化，这样不用没有调用 patch 的时候都传递 nodeOps 和 moudles 了,这种编程技巧也非常值得学习.
在这里, nodeOps 表示对“平台DOM”的一些操作方法, moudles 表示平台的一些模块,它们会在整个 patch 过程的不同阶段执行对应的钩子函数.

回到 patch 方法本身,它接收4个参数, oldVnode 表示旧的 VNode 节点，它也可以不存在或者是一个DOM对象；vnode 表示执行 _render 后返回的VNode的节点；hydrating 表示是否是服务端渲染； removeOnly 是给 transition-grounp 用的，之后会介绍。

patch 的逻辑看上去相对复杂，因为它有着非常多的分支逻辑，为了方便理解，我们并不会在这里介绍所有的逻辑，仅会针对我们之前的例子分析它的执行逻辑。 之后我们对其它场景做源码分析的时候会再次回顾 patch 方法。