前面的章节讲述了从创建到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的所有过程。