Vue源码阅读之5渲染初始化

前面的章节讲述了从创建到BeforeCreated的前两个过程生命周期初始化和事件的初始化，这里讲述这里的最后一个过程渲染初始化，渲染初始化完成之后便完成了BeforeCreated。

export function initRender (vm: Component) {
  vm._vnode = null
  const options = vm.$options
  const parentVnode = vm.$vnode = options._parentVnode 
  const renderContext = parentVnode && parentVnode.context
  vm.$slots = resolveSlots(options._renderChildren, renderContext)
  vm.$scopedSlots = emptyObject
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
  const parentData = parentVnode && parentVnode.data
  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)
  }
}

首先初始化虚拟节点为null。

定义变量options存储Vue对象$options属性。

定义变量parentVnode同时设置Vue对象的值为options._parentVnode即获取父级的虚拟节点。

定义变量renderContext存储父级虚拟节点的渲染内容。

设置Vue对象的$slots属性用于处理此对象中的具名插槽和你们插槽。

设置Vue对象的$scopedSlots属性用于处理此对象中的范围插槽。

设置Vue对象的_c属性其值为createElement函数。

设置Vue对象的$createElement属性其值为createElement函数。

最后给Vue对象的$attrs和$listeners添加setter和getter函数,以及对属性和事件的相关的监听处理，这一部分内容比较多将会在后面的章节进行讲解。

至此完成了从创建Vue对象到BeforeCreated的所有过程。