Vue2.0源码学习(2) - 数据和模板的渲染（下）

vm._render是怎么实现的

上述updateComponent方法调用是运行了一个函数：

// src\core\instance\lifecycle.js
updateComponent = () => {
  vm._update(vm._render(), hydrating)
}

其中会先运行vm._render函数，那么vm._render函数又是从哪里定义的呢？我们回到src\core\instance\index.js，这里一开始会运行renderMixin方法，而renderMixin函数具体定义在src\core\instance\render.js中，去到函数中可以清晰看到，我们心心念念的vm._render就定义在此处了。

// src\core\instance\render.js
export function renderMixin (Vue: Class<Component>) {
  ...
  Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options
    ...
    let vnode
    try {
      // 暂时只关注这部分代码
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
      ...
    }
    ...
    return vnode
  }
}

render函数中其他的先不做详细解读，先把目光聚焦在render.call(vm._renderProxy, vm.$createElement)。

render函数可以在配置中自己写，也可以是生成的，在上节Vue实例挂载中有具体分析过$mount是如何生成render函数的大概流程，忘了的可以回顾一下，往下会以自写的render去跑一遍代码流程。

剖析点①：

vm._renderProxy：在_init函数中定义。

Vue.prototype._init = function (options?: Object) {
  ...
  if (process.env.NODE_ENV !== 'production') {  //非生产环境
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    ...
}

代码中可知生产环境其实就是vm或者说this本身，而非生产环境时则是在initProxy函数中定义vm._renderProxy。我们往下看看定义在src\core\instance\proxy.js里的initProxy方法。

// src\core\instance\proxy.js
let initProxy
...
const hasProxy = typeof Proxy !== 'undefined' && isNative(Proxy)
// 浏览器是否支持proxy
if (hasProxy) {
  const isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta,exact')
  config.keyCodes = new Proxy(config.keyCodes, {
    set (target, key, value) {
      if (isBuiltInModifier(key)) {
        warn(`Avoid overwriting built-in modifier in config.keyCodes: .${key}`)
        return false
      } else {
        target[key] = value
        return true
      }
    }
  })
}
const hasHandler = {
  has (target, key) {
    const has = key in target
    const isAllowed = allowedGlobals(key) ||
      (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data))
    if (!has && !isAllowed) {
      if (key in target.$data) warnReservedPrefix(target, key)
      else warnNonPresent(target, key)
    }
    return has || !isAllowed
  }
}
const getHandler = {
  get (target, key) {
    if (typeof key === 'string' && !(key in target)) {
      if (key in target.$data) warnReservedPrefix(target, key)
      else warnNonPresent(target, key)
    }
    return target[key]
  }
}
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
  }
}
export { initProxy }

initProxy方法首先用hasProxy判断浏览器是否支持proxy，不支持情况下vm._renderProxy就是vm，支持的情况则是用Proxy对vm做一个数据劫持。

vm._renderProxy就告一段落了,下面看vm.$createElement

vm.$createElement：把render函数转换成Vnode，它的定义需要回到我们开始说的vue._init方法，其中运行了initRender方法，而vm.$createElement就定义在initRender函数中，下面我们看看initRender函数。

// src\core\instance\render.js
export function initRender (vm: Component) {
  ...
  // bind the createElement fn to this instance
  // (将createElement fn绑定到此实例)
  // so that we get proper render context inside it.
  // (以便在其中获得适当的渲染上下文)
  // args order: tag, data, children, normalizationType, alwaysNormalize(参数标注)
  // internal version is used by render functions compiled from templates
  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)
  ...
}

其中vm._c是生产render所调用的，而vm.$createElement是自写render调用的，下面我们自写个render来做调试实验。

new Vue({
  el:'#app',
  render(createElement){
    return createElement('div',{
      attrs:{
        id:"app1"
      }
    },this.msg)
  },
  data(){
    return{
      msg:"niccc"
    }
  }
})

还记得前面的Vue.prototype._render方法不，里面有段代码render.call(vm._renderProxy, vm.$createElement)，上面代码块中的render函数中的createElement参数，其实就是vm.$createElement方法。

注：官方render函数文档 https://cn.vuejs.org/v2/api/#render

createElement函数的实现

不知道各位是否还记得之前分析的render函数，其中的vm._c和vm.$createElement都是调用了createElement函数。下面我们来看看该函数

//src\core\vdom\create-element.js
const SIMPLE_NORMALIZE = 1
const ALWAYS_NORMALIZE = 2
export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
  //判断data参数是否为空，空时自动补全
  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)
}

createElement 方法实际上是对 _createElement 方法的封装，它允许传入的参数更加灵活,在处理这些参数后，调用真正创建 VNode 的函数 _createElement，由于函数体较大，我们进行分段解读。

//src\core\vdom\create-element.js
// part 1
export function _createElement (
  context: Component,   //上下文环境，一般就是vm
  tag?: string | Class<Component> | Function | Object,  //标签（element）
  data?: VNodeData,     //VNode数据，VnodeData类型，详见flow\vnode.js
  children?: any,       //Vnode子节点
  normalizationType?: number    //子节点规范类型
): VNode | Array<VNode> {
    if (isDef(data) && isDef((data: any).__ob__)) {
      process.env.NODE_ENV !== 'production' && warn(
        `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
        'Always create fresh vnode data objects in each render!',
        context
      )
      return createEmptyVNode()
    }
    // object syntax in v-bind
    if (isDef(data) && isDef(data.is)) {
      tag = data.is
    }
    if (!tag) {
      // in case of component :is set to falsy value
      return createEmptyVNode()
    }
    // warn against non-primitive key
    if (process.env.NODE_ENV !== 'production' &&
      isDef(data) && isDef(data.key) && !isPrimitive(data.key)
    ) {
      if (!__WEEX__ || !('@binding' in data.key)) {
        warn(
          'Avoid using non-primitive value as key, ' +
          'use string/number value instead.',
          context
        )
      }
    }
    ...
}

我们先分析一下入参：

  context：上下文环境，一般就是vm；

  tag：标签；

  data：VNode数据，VnodeData类型，详见flow\vnode.js；

  children：Vnode子节点；

  normalizationType：子节点规范类型；

往下看其实就是对data数据的判断，看是否需要跑createEmptyVNode函数，即创建注释函数。下面我们继续看part 2。

//src\core\vdom\create-element.js
// part 2
export function _createElement (
  context: Component,   //上下文环境，一般就是vm
  tag?: string | Class<Component> | Function | Object,  //标签（element）
  data?: VNodeData,     //VNode数据，VnodeData类型，详见flow\vnode.js
  children?: any,       //Vnode子节点
  normalizationType?: number    //子节点规范类型
): VNode | Array<VNode> {
    ...
    if (normalizationType === ALWAYS_NORMALIZE) {
        children = normalizeChildren(children)
    } else if (normalizationType === SIMPLE_NORMALIZE) {
        children = simpleNormalizeChildren(children)
    }
    ...
}

children最终形态是Vnode的节点，但是入参中的children却是any类型，所以我们需要对它进行转换，normalizeChildren和simpleNormalizeChildren就是做了这项任务。下面我们看看这两个函数

// src\core\vdom\helpers\normalize-children.js
// 其中simpleNormalizeChildren是拍扁数组，成为一维素组
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
}

simpleNormalizeChildren方法其实就是为了拍扁为一维数组，具体是什么场景下进行的，后续再研究过来填坑。

// src\core\vdom\helpers\normalize-children.js
export function normalizeChildren (children: any): ?Array<VNode> {
  return isPrimitive(children)  //判断是否为基础类型
    ? [createTextVNode(children)]   //是，创建一个vnode节点
    : Array.isArray(children)       //否，判断是否为数组
      ? normalizeArrayChildren(children)    //详见下文
      : undefined
}

normalizeChildren其实最终也是返回一个一维数组，它分了三个情况：

①：isPrimitive判断是基础类型，返回一个用一维数组包裹着的文本Vnode；

②：Array.isArray判断是数组类型，调用normalizeArrayChildren函数；

③：啥都都不是，返回undefined；

然后我们看看第②个情况中，normalizeArrayChildren做了什么。

// src\core\vdom\helpers\normalize-children.js
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]
    // 注①，如果是数组类型，则继续调用normalizeArrayChildren递归，递归后于父数组apply为一个一维数组。
    if (Array.isArray(c)) {
      if (c.length > 0) {
        // 递归chilrend
        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)
      }
    // 注②，如果是基础类型，则创建文本Vnode然后push到res数组中
    } 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))
      }
    // 注③，再否则其实就是一个正常的Vnode，然后回对一些v-for做一些处理，然后也是push到res数组中
    } 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
}

normalizeArrayChildren做的其实就是利用递归把多维数组apply合并成一维数组。

注①：如果是数组类型，则继续调用normalizeArrayChildren递归，递归后于父数组apply为一个一维数组。

注②：如果是基础类型，则创建文本Vnode然后push到res数组中；

注③：再否则其实就是一个正常的Vnode，然后回对一些v-for做一些处理，然后也是push到res数组中；

//src\core\vdom\create-element.js
// part 3
export function _createElement (
  context: Component,   //上下文环境，一般就是vm
  tag?: string | Class<Component> | Function | Object,  //标签（element）
  data?: VNodeData,     //VNode数据，VnodeData类型，详见flow\vnode.js
  children?: any,       //Vnode子节点
  normalizationType?: number    //子节点规范类型
): VNode | Array<VNode> {
  ...
  let vnode, ns
  //这个tag就是'string'
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    //是否HTML原生标签
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      vnode = new VNode(
        //config.parsePlatformTagName方法其实就是传什么返回什么
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && 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)
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
    return createEmptyVNode()
  }
}

首先会判断tag的类型，tag可以是字符串，也可以是组件，组件我们往后再细说，这里先关注String类型。config.isReservedTag判断是否HTML原生标签，(该方法定义在src\platforms\web\util\element.js),config.parsePlatformTagName方法其实就是传什么返回什么，然后new Vnode创建一个Vnode实例。

这个最终生成好的vnode，会经过几个方法return到_render函数。

①：return到createElement函数；

②：return到vm.$createElement；

③：return到vue._render中的vnode = render.call(vm._renderProxy, vm.$createElement)。

自此_render函数就告一段落了，我们接下来开始分析vm._update(vm._render(), hydrating)的vm._update函数。

_update函数的实现

_update是实例的一个私有方法，主要是吧Vnode渲染成真实的dom。调用的情况有两种，一是首次渲染，二是数据更新的时候。_update方法定义在src\core\instance\lifecycle.js，接下来我们看看具体的方法。

// src\core\instance\lifecycle.js
export function lifecycleMixin (Vue: Class<Component>) {
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
      ...
      // 主要方法patch
      vm.$el = vm.__patch__(prevVnode, vnode)
      ...
  }
}

其中核心其实就是vm.__patch__函数，其定义在 src\platforms\web\runtime\index.js

// src\platforms\web\runtime\index.js
import { patch } from './patch'
// 判断是否浏览器环境
Vue.prototype.__patch__ = inBrowser ? patch : noop

__patch__有个三元表达式，inBrowser，用于判断是否为浏览器环境，是则为patch方法，否则就是noop空函数（服务器渲染时用到的）。下面我们看看patch方法，patch方法定义在src\platforms\web\runtime\patch.js

// 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方法创建了许多辅助函数，最后返回patch函数（函数柯里化）

可以看出，patch方法其实就是createPatchFunction方法调用后的return值，createPatchFunction入参分别是nodeOps和modules。

nodeOps其实就是封装一些dom原生操作的方法，有兴趣的可以到src\platforms\web\runtime\node-ops.js看看；

modules是baseModules和platformModules的合集，主要是一些模块的钩子函数，主要用于生成dom，这里暂时不多赘述。

我们把关注点放到createPatchFunction函数上,由于createPatchFunction函数比较复杂，下面会分段分析。

// src\core\vdom\patch.js
const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
export function createPatchFunction (backend) {
  ...
  return function patch (oldVnode, vnode, hydrating, removeOnly) {
    ...
  }
}

createPatchFunction很复杂，看源码是可以看出它其中定义了很多的辅助函数，然后最终返回了一个patch函数，这个也就是patch的最终方法，为什么要这么处理呢？其实这里是运用了函数柯里化的技巧，主要目的是让其有更高的灵活度和可复用性。接下来我们来详细看patch方法。

// src\core\vdom\patch.js
return function patch (oldVnode, vnode, hydrating, removeOnly) {
    ...
    // oldVnode有值所以进入 else 阶段
    if (isUndef(oldVnode)) {
      ...
    } else {
      const isRealElement = isDef(oldVnode.nodeType)
      // isRealElement为true，进入else阶段
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        ...
      } else {
        // isRealElement为true
        if (isRealElement) {
          ...
          // either not server-rendered, or hydration failed.
          // create an empty node and replace it
          // emptyNodeAt函数作用是把真实dom转换成虚拟dom
          oldVnode = emptyNodeAt(oldVnode)
        }
        // replacing existing element
        const oldElm = oldVnode.elm   //提取真实dom对象(div#app)
        const parentElm = nodeOps.parentNode(oldElm)  //真实dom的父级（body）
        // 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 : parent Elm,
          nodeOps.nextSibling(oldElm)
        )
        ...
      }
    }
    //插入钩子函数，后续再细看
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }

因为patch的高复用性，因此patch函数有多个条件判断语句，建议调试看着代码去理解patch。

现在我们以vue-cli默认模板来去分析，其中省略了部分没运行到的代码，上述代码注释中有注释解析，这边就不多赘述了，就简单说一下入参。oldVnode其实就是真实dom对象；vnode是虚拟dom；hydrating和removeOnly其实就是false。

一套流程下来去到了createElm函数，它是定义在createPatchFunction中的，下面我们来具体分析一下这个函数。

// src\core\vdom\patch.js
  function createElm (
    vnode,
    insertedVnodeQueue,
    parentElm,
    refElm,
    nested,
    ownerArray,
    index
  ) {
    ...
    // 标注①
    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
      return
    }
    const data = vnode.data
    const children = vnode.children
    const tag = vnode.tag
    if (isDef(tag)) {
      ...
      // 标注②
      vnode.elm = vnode.ns
        ? nodeOps.createElementNS(vnode.ns, tag)
        : nodeOps.createElement(tag, vnode)
      setScope(vnode)
      /* istanbul ignore if */
      if (__WEEX__) {
        ...
      } else {
        // 标注③
        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的作用其实就是通过vnode创建真实dom并插入到父节点中。

下面我们来分析上述代码块中标注的代码：

①：这里会尝试创建一个组件，当然我们现在创建的是页面，返回的是undefined，后续讲解组件化的时候会再详细聊createComponent函数；

②：vnode.ns为undefined，因此运行的是nodeOps.createElement(tag, vnode)，createElement其实就是就是调用了原生的document.createElement方法去创建一个dom，源码在src\platforms\web\runtime\node-ops.js中；

③：children是否有子节点，有的话创建子节点；createChildren函数其实其实就是递归createElm方法，把子节点插入进来；

④：insert其作用就是根据判断插入dom(insertBefore/appendChild),用到的地方很多，是插入真实dom的主要方法；

总结

自此，数据和模板是如何渲染到dom的过程我们已经分析完毕，当然中间还有很多细节的东西我们没有去探讨，我们首先把思维流程架构起来，然后再慢慢发散分支，这样会更有助我们去把源码读懂，下面再附上一张数据驱动流程图。