Vue.js的核心思想是数据驱动，就是指视图是由数据驱动生成的，我们对视图的修改，并不会直接去操作DOM,而是通过修改数据。下面从源码角度来分析Vue是如何实现的。

1-new Vue做了哪些操作

首先我们可以看到vue的源码在github上有，大家可以克隆下来。 git地址我们主要看src下的内容。

现在我们来分析下 new Vue都做了哪些操作

var app = new Vue({
  el: '#app',
  mounted:{
      console.log(this.message)
  }
  data: {
    message: 'Hello Vue!'
  }
})

我们都知道new关键字在js中代表实例化一个对象，而vue实际上是一个类，类在js中是用Function来实现的，在源码的src/core/instance/index.js中

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
// 声明Vue类
function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}
// 将Vue类传入各种初始化方法
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

可以看到vue只能通过new关键字初始化，然后会调用this._init方法，同时把options参数传入，_init是vue原型上的一个方法。那么接下来我们看下_init方法做了些什么。在initMixin中定义了_init方法。src/core/instance/init.js中

 Vue.prototype._init = function (options?: Object) {
    // this指向Vue的实例，所以这里是将Vue的实例缓存给vm变量
    const vm: Component = this
    //定义uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }
    // a flag to avoid this being observed
    vm._isVue = true
    // merge options   合并options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)//初始化生命周期
    initEvents(vm)//初始化事件中心
    initRender(vm)//初始化渲染
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm) // 初始化state
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)// 调用vm上的$mount方法去挂载
    }
  }

Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。

当我们在chrome的console中可以看到打印出来的data.message的值。试想一下，为什么我们能够输出这个值呢？带着这个问题我们来看看initState在src/core/instance/state.js

export function initState (vm: Component) {
  vm._watchers = []
  //如果定义了options，则始初化options,
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props) //如果有props，则初始化initProps
  if (opts.methods) initMethods(vm, opts.methods)//如果有methods，则初始化initMethods
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

我们具体看下初始化的initData.

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'    //判断data类型是否是一个function，并赋值给vm._data
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {  //判断data是否是一个对象，如果不是，报一堆警告
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // 拿到对象的keys,props,methods
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

当我们的data是一个函数的时候，会去调用getData,然后在getData中返回data。

export function getData (data: Function, vm: Component): any {
  pushTarget()
  try {
    return data.call(vm, vm)
  } catch (e) {
    handleError(e, vm, `data()`)
    return {}
  } finally {
    popTarget()
  }
}

我们拿到对象的keys,props,methods时进行一个循环判断,我们在data上定义的属性值有没有在props中也被定义，如果有，则报警告，这是因为我们定义的所有值最终都会绑定到vm上，通过proxy实现，调用proxy,将_data作为sourceKey传入。

export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]  //vm._data.key会访问这
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

通过这个对象定义了一个get,set。当我们访问this.message时也就是访问了this._data.message。所以我们能获取到this.message的值。

2-Vue实例挂载的实现

Vue中我们是通过$mount实例如方法去挂载vm的，我们来看下$mount的源码，我们来分析compiler版本的$mount，在src/platform/web/entry-runtime-with-compiler.js。

const mount = Vue.prototype.$mount 
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)
}

最开始先获取Vue原型上的$mount方法并进行缓存，然后重新定义了原型上的$mount方法。然后对el的类型进行了控制，el字符串，也可以是一个Element,然后调用了query方法，query方法呢实际上是在util/index.js中有定义，如果你是一个字符串就调用了原生的api->querySelector，如果说找不到的话，就会报一个错误，然后返回一个空的div，如果有的话就直接返回。如果不是字符串，代表着就已经是一个Dom对象，那么就直接return。然后我们拿到了el，这个时候el已经被转化成了dom对象。

紧接着对el进行了一个判断，是否是body或者doucmentElment，如果是的话那么就报错，提示你的vue不可以直接挂载在html和body上，它会将整个body覆盖。这就是我们在使用的时候一开始都会用一个

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

然后拿到了$options,会判断有没有定义render方法，如果没有定义render方法，则会把el或template字符串转换成render方法。所有Vue的组件渲染最终都需要render方法，无论我们是单文件.vue方式开发组件，还是写了el或template属性，最终都会转换成render方法，这个过程是Vue的一个编译过程，通过compileToFunctions生成render,staticRenderFns,然后分别赋值给options.render,options.staticRenderFns。

然后就是如果没有template就会去调用getOuterHTML方法。

function getOuterHTML (el: Element): string {
  if (el.outerHTML) {
    return el.outerHTML
  } else {
    const container = document.createElement('div')
    container.appendChild(el.cloneNode(true))
    return container.innerHTML
  }
}

如果dom对象的outerHtml存在就直接返回，如果不存在，就直接在外面包一层，返回他的innerHTML。

原型上的$mount方法在src/platform/web/runtime/index.js中定义，这样设计完是为了复用，因为它可以被runtime only版本的Vue直接使用。

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

$mount方法支持传入2个参数，第一个是el,它表示挂载的元素，第二个是和服务器渲染相关，在浏览器环境下我们不需要传第二个参数。 $mount 会去调用mountComponent方法。在src/core/instance/core/instance/lifecycle.js文件中。

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    if (process.env.NODE_ENV !== 'production') {
      /* istanbul ignore if */
      if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        vm.$options.el || el) {
        warn(
          'You are using the runtime-only build of Vue where the template ' +
          'compiler is not available. Either pre-compile the templates into ' +
          'render functions, or use the compiler-included build.',
          vm
        )
      } else {
        warn(
          'Failed to mount component: template or render function not defined.',
          vm
        )
      }
    }
  }
  callHook(vm, 'beforeMount')

  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false

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

从上面代码我们可以看到，mountComponent核心就是先调用vm.render方法先生成虚拟Node,下面是来猜测你是出现哪里错误，还提示一些警告，然后再实例化一个渲染watcher，在它的回调函数中会高用updateComponent方法，最终调用vm._update更新DOM。 Watcher在这里起到两个作用，一个是初始化的时候会执行回调函数，另一个是当vm实例中的监测的数据发生变化时候执行回调函数。函数最后判断为根节点的时候设置vm.isMounted为true,表示这个实例已经挂载了，同时执行mounted钩子函数。这里注意vm.$vnode表示VUE实例的父虚拟Node,所以它为Null则表示当前是根Vue的实例。

$mount实现呢还是比较清晰的，如果是在compiler版本的话，实际上是先对el做一些处理，然后尝试如果没有定义render函数的时候我们尝试去获取一下render函数，也就是把我们的template通过一系列的逻辑判断通过编译的方法去转换成render函数。

下面我们来分析下updateComponent方法里的render的源码实现。

3-render方法实现

Vue的_render方法是实例的私有方法，它用来把实例渲染成一个虚拟Node。在src/core/instance/render.js文件中：

Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options

    // reset _rendered flag on slots for duplicate slot check
    if (process.env.NODE_ENV !== 'production') {
      for (const key in vm.$slots) {
        // $flow-disable-line
        vm.$slots[key]._rendered = false
      }
    }

    if (_parentVnode) {
      vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
    }

    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentVnode
    // render self
    let vnode
    try {
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
      handleError(e, vm, `render`)
      // return error render result,
      // or previous vnode to prevent render error causing blank component
      /* istanbul ignore else */
      if (process.env.NODE_ENV !== 'production') {
        if (vm.$options.renderError) {
          try {
            vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
          } catch (e) {
            handleError(e, vm, `renderError`)
            vnode = vm._vnode
          }
        } else {
          vnode = vm._vnode
        }
      } else {
        vnode = vm._vnode
      }
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof VNode)) {
      if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
        warn(
          'Multiple root nodes returned from render function. Render function ' +
          'should return a single root node.',
          vm
        )
      }
      vnode = createEmptyVNode()
    }
    // set parent
    vnode.parent = _parentVnode
    return vnode
  }

这里在原型上定义了一个_render,从$options中拿到这个render函数，我们了解到这个render函数可以是编译生成的也可以是用户自己写的，在这里通过render.call方法传入两个参数，一个是vm._renderProxy,一个是vm.$createElement，vm._renderProxy在生产环境下其实就是vm,vm.$createElement是在initRender函数中定义的，initRender是在init过程中执行initRender方法。如图

export function initRender (vm: Component) {
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  // normalization is always applied for the public version, used in
  // user-written render functions.
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

  // $attrs & $listeners are exposed for easier HOC creation.
  // they need to be reactive so that HOCs using them are always updated
  const parentData = parentVnode && parentVnode.data

  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
      !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
    }, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
      !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
    }, true)
  } else {
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
  }
}

我们看到在initRender函数中有vm._c和vm. $createElement函数，这两个函数最终都是调用createElement方法，但是区别是最后一个参数不一样，vm._c函数是被编译生成的render函数所使用的方法，vm.$ createElement是给手写render函数创建Vnode方法。

_renderProxy的定义也是在init.js中

 /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }

如果是生产环境，直接把vm赋值给vm._renderProxy，如果是在开发环境，调用initProxy，在src/core/instance/proxy.js中，

  initProxy = function initProxy (vm) {
    if (hasProxy) {
      // determine which proxy handler to use
      const options = vm.$options
      const handlers = options.render && options.render._withStripped
        ? getHandler
        : hasHandler
      vm._renderProxy = new Proxy(vm, handlers)
    } else {
      vm._renderProxy = vm
    }
  }

可以看到这里先是去判断hasProxy，

const hasProxy =
    typeof Proxy !== 'undefined' && isNative(Proxy)

hasProxy实际上就是判断我们的浏览器是否支持proxy,proxy是es6提供的api,对对象访问做一个劫持。

我们再回来看下我们的render方法，render方法实际会生成一个vnode，我们拿到这个vnode之后会判断是否是VNode的instance,如果不是的情况下是否是一个数组，如果是一个数组的话证明我们的模板有多个根节点，会返回多个vnode,这时候会报出一个警告，

 'Multiple root nodes returned from render function. Render function ' +
  'should return a single root node.',

所以说根节点只能有一个vnode。

4-Virtual DOM与createElement实现

Virtual Dom 它产生的前提是浏览器中的DOM是很复杂的，为了更直观的感受，我们来打印一下，

浏览器的标准就是把dom设计得很庞大，当我们频繁去更新DOM的时候，会产生一定的性能问题。而Virtual Dom 就是利用原生的js对象去描述一个DOM节点，在vue.js中，Virtual Dom是在src/core/vdom/vnode.js中。Virtual Dom 除了它的数据结构的定义，映射到真实的DOM实际上要经历VNode的create、diff、patch等过程，在Vue.js中，VNode的create是通过之前提到的createElement方法创建的,在src/core/vdom/create-element.js

export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  return _createElement(context, tag, data, children, normalizationType)
}

它定义了6个参数，第一个是vnode的实例，第二个tag是一个标签，第三个data是跟vnode相关的一些数据，children是它的一些子节点，可以构造vnode tree完美的映射我们的dom tree,下面是对于参数个数不一致的处理，也就是data这个值可以没有，其他的参数位置向上移一个，再往下是判断alwaysNormalize,给normalizationType赋上值，然后createELement最终调用的是_createElement这个函数，createElement其实是对参数做一次封装，封装好了然后去调用_createElement去处理这个vnode。我们来看_createElement这个函数，它会data进行了一次校验，这个data不能是响应式的，然后去调用createEmptyVNode，

export const createEmptyVNode = (text: string = '') => {
  const node = new VNode()
  node.text = text
  node.isComment = true
  return node
}

创建一个VNode实例，没有任何参数，然后把text赋值，isComment为true。然后再继续看，然后再判断了data.is，如果不是一个true的话就去返回一个空的注释节点。我们再往下看到，createElement对children做了normalize,主要是在helpers/normalize-children.js当中,simpleNormalizeChildren是对我们的children做了遍历，如果每一个元素也是一个数组的话，调用Array.prototype.concat.apply([].children)给降维成一维数组。然后再看normalizeChildren，最终也是要返回一个一维数组，数组每一个都是一个VNode，先判断children是否是基础类型，如果是直接返回一维数组，否则如果是一个数组，调用normalizeArrayChildren方法，否则就返回undefined。我们看下normalizeArrayChidlren，

function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
  const res = []
  let i, c, lastIndex, last
  for (i = 0; i < children.length; i++) {
    c = children[i]
    if (isUndef(c) || typeof c === 'boolean') continue
    lastIndex = res.length - 1
    last = res[lastIndex]
    //  nested
    if (Array.isArray(c)) {
      if (c.length > 0) {
        c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
        // merge adjacent text nodes
        if (isTextNode(c[0]) && isTextNode(last)) {
          res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
          c.shift()
        }
        res.push.apply(res, c)
      }
    } else if (isPrimitive(c)) {
      if (isTextNode(last)) {
        // merge adjacent text nodes
        // this is necessary for SSR hydration because text nodes are
        // essentially merged when rendered to HTML strings
        res[lastIndex] = createTextVNode(last.text + c)
      } else if (c !== '') {
        // convert primitive to vnode
        res.push(createTextVNode(c))
      }
    } else {
      if (isTextNode(c) && isTextNode(last)) {
        // merge adjacent text nodes
        res[lastIndex] = createTextVNode(last.text + c.text)
      } else {
        // default key for nested array children (likely generated by v-for)
        if (isTrue(children._isVList) &&
          isDef(c.tag) &&
          isUndef(c.key) &&
          isDef(nestedIndex)) {
          c.key = `__vlist${nestedIndex}_${i}__`
        }
        res.push(c)
      }
    }
  }
  return res
}

首选定义了下最后要返回的res是一个数组，然后它遍历了这个children,如果发现某个子节点又是一个Array,就会递归调用normalizeArrayChildren把结果赋值给c,然后有一个小优化就是，开头和最后处理的节点都是文本的话，将这两个合并成为一个，然后进行push。否则如果这个children是一个基础类型，又是一个文本节点的话，就去createTextVNode方法转换成VNode类型最后呢就是把结果push，返回一个res。经过对children的规范化，chidlren变成了一个类型为VNode的Array。

然后我们再回到createElement函数，规范化children后，接下来会去创建一个VNode的实例：

  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
  }

这里呢先对tag做了判断，如果是string类型，则接着判断如果是内置的一些节点，则直接创建一个普通VNode,如果是为已注册的组件名，则通过createComponent创建一个组件类型的VNode，否则创建一个未知的标签的VNode。如果是tag一个component类型，则直接调用createComponent创建一个组件类型的VNode节点。以上呢我们大致了解了虚拟dom 和createElement,每一个VNode有children,children每个元素也是一个VNode，这样就形成了一个VNodeTree，它很好的描述了我们的DOM Tree。再回到mountComponent函数的过程，我们已经知道vm._render是如何创建了一个VNode，接下来就是要把这个VNode渲染成一个真实的DOM并渲染出来，这个过得是通过vm._update完成的。

5-update

_update是实例的一个私有方法，主要将VNode渲染成真实的DOM,在src/core/instance/lifecycle.js中

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const restoreActiveInstance = setActiveInstance(vm)
    vm._vnode = vnode
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    if (!prevVnode) {
      // initial render
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    restoreActiveInstance()
    // 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.
  }

update调用的时机有两个，一个是在首次渲染的时候,调用update，将VNode映射成真实的DOM,还有一个是在我们改变数据的时候，数据改变也会驱动视图的变化，同样也会调update方法。然后我们往下看，定义了一些个常量，这些个是在数据改变的时候用到的，然后往下当条件判断成立的时候，会走vm.patch这个方法，

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

判断是否在浏览器环境，如果在有patch方法否则是一个空函数，这是因为在服务端是不可能触碰到dom的。patch方法是在patch.js文件中定义的，

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

patch方法调用了createPatchFunction,然后返回一个函数，传入了两个值，一个是nodeOps,一个是modules,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, null, null, 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([oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          invokeDestroyHook(oldVnode)
        }
      }
    }

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

拿到modules,nodeOps,对hooks执行循环，遍历所有模块。然后定义了很多辅助函数，最后返回一个function patch。

以上是个人通过视频、查看各位大佬的文章总结的，后续还会有其他文章发布，如有不足之处，欢迎大家来讨论。