在 initEvents 事件系统初始化完成之后,紧接着的就是组件实例的渲染部分的初始化 initRender。
initRender 函数定义位于 src/core/instance/render.ts 文件内,基本定义如下:
export function initRender(vm: Component) { vm._vnode = null vm._staticTrees = null const options = vm.$options const parentVnode = (vm.$vnode = options._parentVnode!) const renderContext = parentVnode && (parentVnode.context as Component) vm.$slots = resolveSlots(options._renderChildren, renderContext) vm.$scopedSlots = parentVnode ? normalizeScopedSlots(vm.$parent!, parentVnode.data!.scopedSlots, vm.$slots) : 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 (__DEV__) { 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 的第四个参数设为 null 重新执行上面的步骤,即省略校验和报错部分 } }
这部分其实比较好理解:
首先是 清空 组件的 VNode 对象和静态dom节点树;并获取到该实例的 父组件虚拟dom树对象 parentVnode 与 父组件实例指向 renderContext
然后是处理 当前组件的 slots 插槽对象 ,以及标准化处理组件的数据域插槽
给组件添加两个 组件创建方法,但是这两个方法有细微差别:
最后对 attrs∗∗和∗∗attrs** 和 **attrs∗∗和∗∗listeners 进行响应式处理。这一步主要是为了提供给高阶组件使用,当使用 attrs∗∗和∗∗attrs** 和 **attrs∗∗和∗∗listeners 进行绑定数据与事件透传时,可以正确触发高阶组件内部的状态更新。
整个过程其实就是解析了组件的 options 配置项与父组件的绑定参数,并对插槽和数据域插槽进行不同处理,最后给组件添加 _createElement 的事件指向绑定,并响应式处理两个组件内部没有直接定义的参数/事件。
因为这部分篇幅较少,所以把 callHook() 方法也一并看了。
这个方法从名字上就可以看出,是用来触发生命周期钩子的回调函数。在之前的 mergeOptions 配置合并 中已经知道,Vue 组件在实例化的时候会对 options 中的生命周期钩子函数定义进行标准化处理,最后每个生命周期对应的都是一个 函数数组(如果有定义了钩子函数的话)。
该方法的定义如下:
export function callHook(vm: Component, hook: string, args?: any[], setContext = true) { pushTarget() const prev = currentInstance setContext && setCurrentInstance(vm) const handlers = vm.$options[hook] const info = `${hook} hook` if (handlers) { for (let i = 0, j = handlers.length; i < j; i++) { invokeWithErrorHandling(handlers[i], vm, args || null, vm, info) } } if (vm._hasHookEvent) { vm.$emit('hook:' + hook) } setContext && setCurrentInstance(prev) popTarget() }
这里可以分成一下几步来理解: