【读vue源码】探究模版和数据是如何被渲染成DOM的？

阅读资源推荐

vue.js源码托管地址

flow 静态检查工具地址

rollup 源码构建

虚拟DOM开源库

【读vue 源码】溯源 import Vue from 'vue' 到底做了什么?

前言

Vue.js 一个核心思想是数据驱动。也就是说视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护。

在 Vue.js 中我们可以采用简洁的模板语法来声明式的将数据渲染为 DOM：

<div id="app">
  {{ msg }}
</div>
复制代码

var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello world!'
  }
})
复制代码

结果页面上会展示出Hello world!。这是入门vue.js的时候就知道的知识。那么现在要问vue.js的源码到底做了什么，才能让模版和数据最终被渲染成了DOM？？？

从 new Vue() 开始

在写vue 项目的时候，会在项目的入口文件 main.js文件里实例化一个vue 。 如下：

var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello world!'
  },
})
复制代码

由上一篇文章最后的结论可知，Vue 就是一个用 Function 实现的类。源码如下：在src/core/instance/index.js中

// _init 方法所在的位置
import { initMixin } from './init' 
// Vue就是一个用 Function 实现的类,所以才通过 new 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)
}
复制代码

当我们在项目中 new Vue({})传入一个对象的时候，其实就是执行的上面的方法，并传入参数为 options ，然后调用了this._init(options)方法。该方法在src/core/instance/init.js文件中。代码如下：

import { initState } from './state'
Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // 定义了uid
    vm._uid = uid++

    let startTag, endTag
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    vm._isVue = true
    // 合并options 
    if (options && options._isComponent) {
      initInternalComponent(vm, options)
    } else {
      // 这里将传入的options全部合并在$options上。
      // 因此我们可以通过$el访问到 vue 项目中new Vue 中的el
      // 通过$options.data 访问到 vue 项目中new Vue 中的data
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // 初始化函数
    vm._self = vm
    initLifecycle(vm) // 生命周期函数
    initEvents(vm) // 初始化事件链
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }
    // 判断当前的$options.el是否有el 也就是说是否传入挂载的DOM对象
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
复制代码

由以上代码可知 this._init(options)主要是合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。重要的部分在代码里做里注释。

那么接下来依然从其中一个功能为例进行分析：以initState(vm)为例：

为什么在钩子函数里可以访问到 data 里定义的数据？

vue 项目中，当定义了 data 就可以在组件的钩子函数 或者 在 methods 函数里都可以访问到data 里定义的属性。这是为什么？？

var app = new Vue({
  el: '#app',
  data:(){
      return{
          msg: 'Hello world!'
      }
  },
  mounted(){
    console.log(this.msg) // logs 'Hello world!'
  },
复制代码

分析源码：可以看到this._init(options)方法，在初始化函数部分有一个 initState(vm)函数。该方法实在./state.js中：具体代码如下：

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  // 如果定义了 props 就初始化props；
  if (opts.props) initProps(vm, opts.props)
  // 如果定义了methods 就初始化methods；
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    // 如果定义了data,就初始化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)
  }
}
复制代码

在initState方法中判断：如果定义了data,就初始化data;继续看初始化data 的函数：initData(vm)。代码如下：

function initData (vm: Component) {
 /* 
  这个data 就是 我们vue 项目中定义的data。也就是上面例子中的 
  data(){
    return {
      msg: 'Hello world!'
    }
  }
  */
  let data = vm.$options.data
  // 拿到data 后，做了判断，判断它是不是一个function
  data = vm._data = typeof data === 'function'
    ? getData(data, vm) // 如果是 执行了getData()方法 ，这个方法就是返回data
    : data || {}
  // 如果不是一个对象则在开发环境报出一个警告
  if (!isPlainObject(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
    )
  }
  // 拿到data 定义的属性
  const keys = Object.keys(data) 
  // 拿到props
  const props = vm.$options.props
  // 拿到 methods
  const methods = vm.$options.methods
  let i = keys.length
  // 做了一个循环对比，如果在data 上定义的属性，就不能在props与methods在定义该属性。因为不管是data里定义的，在props里定义的，还是在medthods里定义的，最终都挂载在vm实例上了。见proxy(vm, `_data`, key)
  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) // 代理 定义了Getter 和 Setter
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}
复制代码

// proxy 代理
const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}
export function proxy (target: Object, sourceKey: string, key: string) {
  // 通过对象 sharedPropertyDefinition  定义了Getter 和 Setter
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
    // 当访问vm.key 的时候其实访问的是 vm[sourceKey][key]
    // 以上述开始的问题，当访问this.msg 实际是访问 this._data.msg
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  // 对vm 的 key 做了一次Getter 和 Setter
  Object.defineProperty(target, key, sharedPropertyDefinition)
  
}
复制代码

综上：初始化 data 实在./state.js文件里。执行initState() 方法，该方法判断如果定义了data,就初始化data。

如果data 是一个function，就执行了getData()方法return data.call(vm, vm)。然后对 vm 上的 data 里定义的属性、vm上的 props 、vm上的methods里的属性进行循环比对，如果在data 上定义的属性，就不能在props与methods在定义该属性。因为不管是data里定义的，在props里定义的，还是在medthods里定义的，最终都挂载在vm实例上了。见proxy(vm, _data, key)。

然后通过proxy 方法给vm 上的属性做了Getter 和 Setter 方法的绑定。回到上述的问题，当访问this.msg 实际是访问 vm._data.msg。因此在钩子函数里确实可以访问到 data 里定义的数据了。

不得不在说一遍，Vue 的初始化逻辑写的非常清楚，把不同的功能逻辑拆成一些单独的函数执行，让主线逻辑一目了然，这样的编程思想是非常值得借鉴和学习的。

其它初始化的内容大家可以自己补充，接下来看挂载vm。在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM，那么接下来探究 Vue 的挂载过程吧

Vue 实例挂载的实现

Vue 中我们是通过 $mount 实例方法去挂载 vm 的。接下来要探究执行$mount('#app')的时候，源码都干了什么？？？

new Vue({
  render: h => h(App),
}).$mount('#app')
复制代码

$mount 方法在多个文件中都有定义，如 src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js、src/platform/weex/runtime/index.js。因为 $mount 这个方法的实现是和平台、构建方式都有关系。

就选取 compiler 版本的 $mount 分析吧，文件地址在src/platform/web/entry-runtime-with-compiler.js,代码如下：

// 获取vue 原型上的 $mount 方法, 存在变量 mount 上。
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  // query 定义在 './util/index'文件中
  // 调用原生的DOM api querySelector() 方法。最后将el转化为一个DOM 对象。
  el = el && query(el)
  ...
  return mount.call(this, el, hydrating)
}
复制代码

读代码可知，代码首先获取了 vue 原型上的 $mount 方法，将其存在变量mount中，然后重新定义了该方法。该方法对传入的el做了处理，el 可以是个字符串，也可以是DOM 对象。然后调用了 query()方法，该方法在./util/index文件中。主要是调用原生的DOM api querySelector() 方法。最后将el转化为一个DOM 对象返回。上述只贴出了主要的代码部分。

源码了还对el进行了判断，判断传入的el 是否为body 或者 html ,如果是，就会在开发环境报一个警告。vue 不可以直接挂载到body 和html上 ,因为会被覆盖，当覆盖了 html 或 body 整个文档就会报错。

源码还获取到 $options 判断是否定义render方法。如果没有定义 render 方法，则会把 el 或者 template 字符串最终将编译为render()函数。

最后 return mount.call(this, el, hydrating)。此处的mount是vue 原型上的 $mount 方法。在文件./runtime/index。代码如下：

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

其中参数 el 表示挂载的元素，它可以是字符串，也可以是一个DOM 对象。如果是字符串在浏览器环境下会调用 query() 方法转换成 DOM 对象。第二个参数是和服务端渲染相关，在浏览器环境下我们不需要传第二个参数。最后return 的时候调用了mountComponent()方法。该方法定义在src/core/instance/lifecycle.js,代码如下：

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
    vm.$el = el
    ...
    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)
      }
    }
  
    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
}
复制代码

读代码可知，该方法首先实例化一个渲染Watcher，在它的回调函数中会调用 updateComponent 方法，在此方法中调用 vm._render（） 方法先生成虚拟DOM节点，最终调用 vm._update 更新 DOM。

最后判断为根节点的时候设置 vm._isMounted 为 true， 表示这个实例已经挂载了，同时执行 mounted 钩子函数。 vm.$vnode 表示 Vue 实例的父虚拟节点，所以它为 Null 则表示当前是根 Vue 的实例。

那么vm._render（）是怎样生成虚拟DOM节点的呢？

_render()渲染虚拟DOM 节点

在 Vue 2.0 版本中，所有 Vue 的组件的渲染最终都需要 render()。Vue 的 _render() 是实例的一个私有方法，它用来把实例渲染成一个虚拟DOM节点。它的定义在 src/core/instance/render.js 文件中,代码如下：

  Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options
    
    ...
    
    let vnode
    try {
      currentRenderingInstance = vm
      vnode = render.call(vm._renderProxy, vm.$createElement)
    }
  }
复制代码

上述代码 从vue实例的 $options 上获取到 render 函数。通过call()调用了_renderProxy和 createElement()方法，先来探索createElement()方法。

createElement()

createElement()是在initRender()中。如下：

// 该函数是在 _init() 过程中执行 initRender()
// 见 './init.js' 文件中的 initRender(vm) 传入vm。就执行到下面的方法。
export function initRender (vm: Component) {
    // 被编译后生成的render函数
    vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) 
    // 手写render函数 创建 vnode 的方法。
    vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) 
}
复制代码

initRender()是在 _init过程中执行了initRender()见 ./init.js 文件中的 initRender(vm)传入vm。

在 vue 项目实际开发中，手写 render 函数 案例如下：

new Vue({
  render(createElement){
    return createElement('div',{
      style:{color:'red'}
    },this.msg)
  },
  data(){
    return{
      msg:"hello world"
    }
  }
}).$mount('#app')
复制代码

因为是手写的render函数省去了将 template 编译为 render函数的过程，因此性能更好。

接下来看_renderProxy方法：

_renderProxy

_renderProxy方法，也是在 init 过程中执行的。见文件./init.js中，代码如下：

import { initProxy } from './proxy'

if (process.env.NODE_ENV !== 'production') {
    initProxy(vm)
} else {
    vm._renderProxy = vm
}
复制代码

如果当前环境为生产环境 就将 vm 直接赋值给 vm._renderProxy;

如果当前环境为开发环境,则执行initProxy()。

该函数在./proxy.js文件中,代码如下：

initProxy = function initProxy (vm) {
    // 判断浏览器是否支持 proxy 。
    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
    }
  }
复制代码

首先判断浏览器是否支持 proxy。它是ES6 新增的，用于给目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

如果浏览器不支持 proxy， 就将 vm 直接赋值给 vm._renderProxy;

如果浏览器支持 proxy，就执行new Proxy()。

综上所述：vm._render 是通过执行 createElement 方法并返回虚拟的DOM 节点。那么什么是虚拟的DOM呢？？？

虚拟的DOM

在探究vue 的虚拟DOM 之前，先推荐一个虚拟DOM开源库。有时间，有兴趣的朋友可以去深入了解。它是用一个函数去表示一个应用程序的视图层。view.js 是借鉴它实现了虚拟DOM。从而大大的提升了程序的性能。接下来我们就来看vue.js是怎么做的。

vnode 的定义在 src/core/vdom/vnode.js文件中，如下：

export default class VNode {
 tag: string | void;
 data: VNodeData | void;
 children: ?Array<VNode>;
 text: string | void;
 elm: Node | void;
 ...
}
复制代码

虚拟DOM 是个js对象，是对真实DOM 的一种抽象描述，比如标签名、数据、子节点名等。因为虚拟DOM只是用来映射真实DOM的渲染，所以不包含操作DOM的方法操作DOM的方法。因此更加的轻量，更加的简单。因为虚拟DOM 的创建是通过createElement方法，那这个环节又是如何实现的呢？？？

createElement

Vue.js 利用 createElement 方法创建 DOM节点，它定义在 src/core/vdom/create-elemenet.js文件中，代码如下：

export function createElement (
 context: Component, // vm 实例
 tag: any, // 标签
 data: any, // 数据
 children: any,// 子节点 可以构造DOM 树
 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
 }
 // 处理好参数，则调用 _createElement() 去真正的创建节点。
 return _createElement(context, tag, data, children, normalizationType)
}
复制代码

createElement 方法是对 _createElement 方法的封装，它允许传入的参数更加灵活，在处理这些参数后，调用真正创建 DOM 节点的函数_createElement,代码如下：

export function _createElement (
 context: Component,
 tag?: string | Class<Component> | Function | Object,
 data?: VNodeData,
 children?: any,
 normalizationType?: number
): VNode | Array<VNode> {
   ...
   if (normalizationType === ALWAYS_NORMALIZE) {
       children = normalizeChildren(children)
   } else if (normalizationType === SIMPLE_NORMALIZE) {
       children = simpleNormalizeChildren(children)
   }
   ...
}
复制代码

_createElement 方法提供 5 个参数如下：

• context 表示DOM节点的上下文环境，它是 Component 类型；
• tag 表示标签，它可以是一个字符串，也可以是一个 Component；
• data 表示 DOM节点上的数据，它是一个 VNodeData 类型，可以在 flow/vnode.js 中找到它的定义；
• children 表示当前DOM节点的子节点，它是任意类型的，它接下来需要被规范为标准的 VNode 数组；
• normalizationType 表示子节点规范的类型，类型不同规范的方法也就不一样，它主要是参考 render 函数是编译生成的还是手写的 render 函数。

createElement 函数的流程略微有点多，本文将重点探究 children 的规范化以及 VNode 的创建。

children 的规范化

虚拟DOM（Virtual DOM）实际上是一个树状结构，每一个DOM 节点都可能会有若干个子节点，这些子节点应该也是 VNode 的类型。

_createElement 接收的第 4 个参数 children 是任意类型的，因此我们需要把它们规范成 VNode 类型。

它是根据 normalizationType 的不同，调用了 normalizeChildren(children) 和 simpleNormalizeChildren(children) 方法，它们的定义都在 src/core/vdom/helpers/normalzie-children.js文件 中，代码如下：

// render 函数是编译生成的时候调用
// 拍平数组为一维数组
export function simpleNormalizeChildren (children: any) {
  for (let i = 0; i < children.length; i++) {
    if (Array.isArray(children[i])) {
      return Array.prototype.concat.apply([], children)
    }
  }
  return children
}
// 返回一维数组
export function normalizeChildren (children: any): ?Array<VNode> {
  return isPrimitive(children)
    ? [createTextVNode(children)]
    : Array.isArray(children)
      ? normalizeArrayChildren(children)
      : undefined
}
复制代码

simpleNormalizeChildren 方法调用场景是 render 函数是编译生成的。但是当子节点为一个组件的时候，函数式组件返回的是一个数组而不是一个根节点，所以会通过 Array.prototype.concat 方法把整个 children 数组拍平，让它的深度只有一层。

normalizeChildren 方法的调用场景有 2 种，一个场景是手写 render 函数，当 children 只有一个节点的时候，Vue.js 从接口层面允许用户把 children 写成基础类型用来创建单个简单的文本节点，这种情况会调用 createTextVNode 创建一个文本节点的DOM 节点；另一个场景是当编译 slot、v-for 的时候会产生嵌套数组的情况，会调用 normalizeArrayChildren 方法，代码如下：

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)) {
        res[lastIndex] = createTextVNode(last.text + c)
      } else if (c !== '') {
        res.push(createTextVNode(c))
      }
    } else {
      // 如果两个节点都为文本节点，则合并他们。
      if (isTextNode(c) && isTextNode(last)) {
        res[lastIndex] = createTextVNode(last.text + c.text)
      } else {
        if (isTrue(children._isVList) &&
          isDef(c.tag) &&
          isUndef(c.key) &&
          isDef(nestedIndex)) {
          c.key = `__vlist${nestedIndex}_${i}__`
        }
        res.push(c)
      }
    }
  }
  return res
}
复制代码

normalizeArrayChildren 接收 2 个参数。

• children 表示要规范的子节点；
• nestedIndex 表示嵌套的索引; 因为单个 child可能是一个数组类型。 normalizeArrayChildren 主要是遍历 children，获得单个节点 c，然后对 c 的类型判断，如果是一个数组类型，则递归调用 normalizeArrayChildren; 如果是基础类型，则通过 createTextVNode 方法转换成 VNode 类型；否则就已经是 VNode 类型了，如果 children 是一个列表并且列表还存在嵌套的情况，则根据 nestedIndex 去更新它的 key。

在遍历的过程中，对这 3 种情况都做了如下处理：如果存在两个连续的 text 节点，会把它们合并成一个 text 节点。

到此，children 变成了一个类型为 VNode 的 Array。这就是children 的规范化。

虚拟的DOM节点的创建

回到 createElement 函数，规范化 children 后，接下来就要创建一个DOM实例，代码如下：

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 {
    // 不认识的节点的处理
    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 节点。

到这一步，createElement方法就创建好了一个虚拟DOM树的实例，它用来描述了真实DOM 树，那么如何渲染为真实的DOM 树呢？？？其实它是由 vm._update 完成的。

update把虚拟DOM 渲染为真实DOM

_update 方法是如何把虚拟DOM 渲染为真实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
    if (!prevVnode) {
      // 数据的首次渲染时候执行
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    }
   ...
  }
复制代码

读代码可知，当数据首次渲染的时候，调用了vm.__patch__()的方法，他接收了四个参数，结合我们实际vue项目的开发过程。vm.$el就是 id 为 app 的 DOM 对象，即：<div id="app"></div>；vnode 对应的是调用 render 函数的返回值;hydrating 在非服务端渲染情况下为 false，removeOnly 为 false。

vm.__patch__ 方法在不同的平台的定义是不一样的，对 web 平台的定义在 src/platforms/web/runtime/index.js 中,代码如下：

// 是否在浏览器环境
Vue.prototype.__patch__ = inBrowser ? patch : noop
复制代码

在 web 平台上，是否是服务端渲染也会对这个方法产生影响。因为在服务端渲染中，没有真实的浏览器 DOM 环境，所以不需要把 VNode 最终转换成 DOM，因此是一个空函数，而在浏览器端渲染中，它指向了 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'

const modules = platformModules.concat(baseModules)

export const patch: Function = createPatchFunction({ nodeOps, modules })
复制代码

读代码可知 createPatchFunction 方法的返回值被传入了一个对象，其中，

• 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]])
      }
    }
  }
    
  // ...
  // 定义了一些辅助函数
  
  
  // 当调用 vm.__dispatch__时，其实就是调用下面的 patch 方法
  // 这块应用了函数柯理化的技巧
  return function patch (oldVnode, vnode, hydrating, removeOnly) {
    // ...
    return vnode.elm
  }
}
复制代码

createPatchFunction 内部定义了一系列的辅助方法，最终返回了一个 patch 方法，这个方法就赋值给了 vm._update函数里调用的 vm.__patch__。也就是说当调用 vm.__dispatch__时，其实就是调用patch (oldVnode, vnode, hydrating, removeOnly) 方法，这块其实是应用了函数柯理化的技巧。

patch 方法接收 4个参数,如下：

• oldVnode 表示旧的 VNode 节点，它也可以不存在或者是一个 DOM 对象；
• vnode 表示执行 _render 后返回的 VNode 的节点；
• hydrating 表示是否是服务端渲染；
• removeOnly 是给 transition-group 用的。

分析patch方法，因为传入的oldVnode实际上是一个 DOM container，所以 isRealElement 为 true,然后调用 emptyNodeAt 方法把 oldVnode 转换成 虚拟DOM节点（一个js对象），然后再调用 createElm 方法。代码如下：

if (isRealElement) {
    oldVnode = emptyNodeAt(oldVnode)
}
复制代码

function createElm (
  vnode,
  insertedVnodeQueue,
  parentElm,
  refElm,
  nested,
  ownerArray,
  index
) {
  if (isDef(vnode.elm) && isDef(ownerArray)) {
    vnode = ownerArray[index] = cloneVNode(vnode)
  }

  vnode.isRootInsert = !nested // for transition enter check

  const data = vnode.data
  const children = vnode.children
  const tag = vnode.tag
  // 接下来判断 vnode 是否包含 tag，
  // 如果包含，先对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
        )
      }
    }
     // 调用 createChildren 方法去创建子元素：
    vnode.elm = vnode.ns
      ? nodeOps.createElementNS(vnode.ns, tag)
      : nodeOps.createElement(tag, vnode)
    setScope(vnode)

    /* istanbul ignore if */
    if (__WEEX__) {
      // ...
    } else {
      // 调用 createChildren 方法去创建子元素
      // 用 createChildren 方法遍历子虚拟节点，递归调用 createElm
      // 在遍历过程中会把 vnode.elm 作为父容器的 DOM 节点占位符传入。
      createChildren(vnode, children, insertedVnodeQueue)
      if (isDef(data)) {
        invokeCreateHooks(vnode, insertedVnodeQueue)
      }
      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)
  }
}
复制代码

createElm方法的作用是通过虚拟节点创建真实的 DOM 并插入到它的父节点中。判断 vnode 是否包含 tag，如果包含，先对 tag 的合法性在非生产环境下做验证，看是否是一个合法标签；然后再去调用平台 DOM 的操作去创建一个占位符元素。然后调用 createChildren 方法去创建子元素,createChildren方法代码如下：

createChildren(vnode, children, insertedVnodeQueue)

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方法遍历子虚拟节点，递归调用 createElm，在遍历过程中会把 vnode.elm 作为父容器的 DOM 节点占位符传入。然后调用 invokeCreateHooks方法执行所有的 create 的钩子并把 vnode push 到 insertedVnodeQueue 中。最后调用 insert 方法把 DOM 插入到父节点中，因为是递归调用，子元素会优先调用 insert，所以整个 vnode 树节点的插入顺序是先子后父。insert 方法定义在 src/core/vdom/patch.js 文件中，代码如下：

insert(parentElm, vnode.elm, refElm)

function insert (parent, elm, ref) {
  if (isDef(parent)) {
    if (isDef(ref)) {
      if (ref.parentNode === parent) {
        nodeOps.insertBefore(parent, elm, ref)
      }
    } else {
      nodeOps.appendChild(parent, elm)
    }
  }
}
复制代码

读代码可知，insert方法调用一些辅助方法把子节点插入到父节点中(其实就是调用原生 DOM 的 API 进行 DOM 操作)，这些辅助方法定义在 src/platforms/web/runtime/node-ops.js 文件中。到此，Vue 动态创建的 DOM节点就完成了。emm~~ 回头在看看这个图。

结束

最近一段时间都会认真的去看vue.js的源码。【读vue 源码】会按照一个系列去更新。分享自己学习的同时，也希望与更多的同行交流所得，如此而已。

第一篇：【读vue 源码】溯源 import Vue from 'vue' 到底做了什么?

第二篇：【读vue源码】探究模版和数据是如何被渲染成DOM的？ 【当前在读】

来源：oschina

链接：https://my.oschina.net/u/4331787/blog/4287188