1，虚拟DOM 解决了什么问题

在 web 页面中，操作真实 DOM 的成本是很高的，所以一款优秀的 MVVM 框架必须尽可能的在状态发生变化的时候，最少量的操作真实 DOM，以此提高 web 页面的性能。

在 Vue 中，如果组件中的状态发生变化，这个组件就会被重新渲染，组件重新渲染最简单的方式是不管是哪一个状态发生了变化，只要将组件对应的真实 DOM 删除，再根据最新的状态生成一份最新的真实 DOM，并将其显示到页面上即可。这种方式非常的简单，但是缺点也是显而易见的，它大量的操作了真实 DOM，性能表现很不好，一个状态改变，只重新渲染这个状态所关联的真实 DOM 即可，没必要把其他的无关真实 DOM 也重新渲染。

所以 Vue 需要另外一种组件渲染的方案，这种方案要保证状态发生变化的时候，只重新渲染与这个状态相关联的真实 DOM，Vue 的解决方案就是虚拟DOM。

2，虚拟DOM 的运行流程总览

看这一小节之前，最好先回顾一下前面模板编译和响应式的知识，博客链接如下：

模板编译：

响应式系统：

Vue源码阅读（6）：响应式原理讲解的前期准备

Vue源码阅读（7）：将数据转换成响应式的

Vue源码阅读（8）：以组件的渲染为例看依赖收集和变化侦测

2-1，通过 render 函数生成 vnode

redner 函数的作用是根据最新的状态生成最新的 vnode，vnode 也不是什么神奇的东西，可以把它看作是真实 DOM 的 Javascript 对象字面量的表示，通过这个对象字面量可以创建出对应的真实DOM节点，也就是说这个对象字面量中的属性可以很好的描述一个DOM节点。

2-2，初次渲染组件的时候

在初次渲染组件到页面的时候，虚拟DOM 无需进行 vnode 的对比工作（diff 算法），直接通过 vnode 创建出对应的真实DOM，然后显示在页面上即可。

// export const patch: Function = createPatchFunction({ nodeOps, modules })
// createPatchFunction 的作用：根据当前的运行环境，创建出对应的 patch 方法，并返回。
export function createPatchFunction (backend) {
  ......
  // 在首次渲染和组件更新时调用
  return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
    if (isUndef(oldVnode)) {
      // 首次渲染时，会执行到这里。
      // empty mount (likely as component), create new root element
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue, parentElm, refElm)
    } else {
      // 组件更新，重新渲染，会执行到这里。
      ......
    }
  }
}

2-3，状态改变，组件重新渲染

当组件使用的状态发生改变的时候，会触发该组件的重新渲染，这一功能是借助响应式系统实现的，这一块不了解或者忘记了的朋友可以看我在上面列出来的文章，关键代码如下所示：

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // 将 el 设值到 vm 中的 $el
  vm.$el = el

  // 触发执行 beforeMount 生命周期函数(挂载之前)
  callHook(vm, 'beforeMount')

  // 一个更新渲染组件的方法
  let updateComponent = () => {
    // vm._render() 函数的执行结果是一个 VNode
    // vm._update() 函数执行虚拟 DOM 的 patch 方法来执行节点的比对与渲染操作
    vm._update(vm._render(), hydrating)
  }

  // 这里的 Watcher 实例是一个渲染 Watcher，组件级别的
  vm._watcher = new Watcher(vm, updateComponent, noop)

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

组件中的数据发生变化的时候，会触发执行该组件对应渲染 Watcher 的 updateComponent 方法，在 updateComponet 方法中，会执行 render 函数生成最新的 vnode，然后通过 _update 更新渲染页面。

2-4，在 _update 方法中，调用 patch 方法对比新老 vnode，然后更新视图

patch 函数能够对比新老 vnode，找出两者之间的不同点，然后针对这些不同点对?web 页面中的真实 DOM 进行更新。

这么做的原因是：Javascript 操作对象字面量的速度比操作真实 DOM 的速度快得多，因此可以把大量的 DOM 操作转移到操作对象字面量中，在这一环节就计算出哪些真实 DOM 需要更新，然后在操作真实 DOM 的时候，直接更新对应的 DOM 即可，这样就可以最大限度的减少 DOM 的操作，提高性能。

对应的源码如下所示：

// _update 方法的作用是将 VNode 映射成真实的 DOM
  // 调用的时机有两个：（1）刚渲染时；（2）依赖的数据更新时（页面需要重新渲染）
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    if (vm._isMounted) {
      // 如果当前的 vm 已经挂载了的话，说明当前是第（2）中情况，所以需要执行 beforeUpdate 回调函数
      callHook(vm, 'beforeUpdate')
    }
    const prevEl = vm.$el
    // 上一次渲染时的 VNode
    // 第一次渲染时，为空
    const prevVnode = vm._vnode
    vm._vnode = vnode
    if (!prevVnode) {
      // 首次渲染
      ......
    } else {
      // 依赖的数据更新时，页面需要重新渲染，调用 patch 进行 diff 算法比对新老 vnode
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
  }