在Vue.prototype._init 中有一些init函数，今天我们来研究这些init函数
Vue.prototype._init = function (options) {......{initProxy(vm);}......initLifecycle(vm);initEvents(vm);initRender(vm);callHook$1(vm, 'beforeCreate', undefined, false /* setContext */);initInjections(vm); // resolve injections before data/propsinitState(vm);initProvide(vm); // resolve provide after data/propscallHook$1(vm, 'created');......
}上一篇中已经研究了initEvents，今天我们往下研究
initRender(vm);function initRender(vm) {vm._vnode = null; // the root of the child treevm._staticTrees = null; // v-once cached treesconst options = vm.$options;const parentVnode = (vm.$vnode = options._parentVnode); // the placeholder node in parent treeconst renderContext = parentVnode && parentVnode.context;vm.$slots = resolveSlots(options._renderChildren, renderContext);vm.$scopedSlots = parentVnode? normalizeScopedSlots(vm.$parent, parentVnode.data.scopedSlots, vm.$slots): emptyObject;// bind the createElement fn to this instance// 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// @ts-expect-errorvm._c = (a, b, c, d) => createElement$1(vm, a, b, c, d, false);// normalization is always applied for the public version, used in// user-written render functions.// @ts-expect-errorvm.$createElement = (a, b, c, d) => createElement$1(vm, a, b, c, d, true);// $attrs & $listeners are exposed for easier HOC creation.// they need to be reactive so that HOCs using them are always updatedconst parentData = parentVnode && parentVnode.data;/* istanbul ignore else */{defineReactive(vm, '$attrs', (parentData && parentData.attrs) || emptyObject, () => {!isUpdatingChildComponent && warn$2(`$attrs is readonly.`, vm);}, true);defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {!isUpdatingChildComponent && warn$2(`$listeners is readonly.`, vm);}, true);}
}function initRender(vm) {vm._vnode = null; // the root of the child treevm._staticTrees = null; // v-once cached treesconst options = vm.$options;const parentVnode = (vm.$vnode = options._parentVnode); // the placeholder node in parent treeconst renderContext = parentVnode && parentVnode.context;......
}清空 组件的 VNode 对象和静态dom节点树
并获取到该实例的 父组件虚拟dom树对象 parentVnode 与 父组件实例指向 renderContext
function initRender(vm) {......vm.$slots = resolveSlots(options._renderChildren, renderContext);vm.$scopedSlots = parentVnode? normalizeScopedSlots(vm.$parent, parentVnode.data.scopedSlots, vm.$slots): emptyObject;......
}处理当前组件的 slots 插槽对象 ，以及标准化处理组件的数据域插槽
function resolveSlots(children, context) {// 1.判断是否有children，有没有插槽，如果没有直接返回空对象if (!children || !children.length) {return {};}const slots = {};// for循环遍历子节点for (let i = 0, l = children.length; i < l; i++) {const child = children[i];const data = child.data;// remove slot attribute if the node is resolved as a Vue slot node// 如果节点node已经处理了，移出slot，删除该节点attrs的slotif (data && data.attrs && data.attrs.slot) {delete data.attrs.slot;}// named slots should only be respected if the vnode was rendered in the// same context.// 判断是否是具名插槽，如果是具名插槽，还需要子组件 / 函数子组件 渲染上下文一致// 当需要向子组件的子组件传递具名插槽时，不会保持插槽的名字if ((child.context === context || child.fnContext === context) &&data &&data.slot != null) {const name = data.slot;const slot = slots[name] || (slots[name] = []);//处理父组件采用template形式的插槽if (child.tag === 'template') {slot.push.apply(slot, child.children || []);}else {slot.push(child);}}else {//返回匿名default插槽VNode数组(slots.default || (slots.default = [])).push(child);}}// ignore slots that contains only whitespace// 忽略仅仅包含whitespace的插槽for (const name in slots) {if (slots[name].every(isWhitespace)) {delete slots[name];}}return slots;
}// 方法用于判断指定字符是否为空白字符,空白符包含:空格、tab键、换行符
function isWhitespace(node) {return (node.isComment && !node.asyncFactory) || node.text === ' ';
}function initRender(vm) {......// bind the createElement fn to this instance// 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// @ts-expect-errorvm._c = (a, b, c, d) => createElement$1(vm, a, b, c, d, false);// normalization is always applied for the public version, used in// user-written render functions.// @ts-expect-errorvm.$createElement = (a, b, c, d) => createElement$1(vm, a, b, c, d, true);......
}给 组件 添加两个组件创建方法
_c 表示使用内部 render 函数，不需要额外的标准化处理
$createElement 则表示使用的是用户自己编写的 render 函数，需要内部重新进行一次标准化处理
这两个方法最终其实都是调用的 _createElement 方法，只是标准函数（即 _c）使用 simpleNormalizeChildren() 处理，而用户自定义 render （即 $createElement）使用 normalizeChildren() 处理
function initRender(vm) {......const parentData = parentVnode && parentVnode.data;/* istanbul ignore else */{defineReactive(vm, '$attrs', (parentData && parentData.attrs) || emptyObject, () => {!isUpdatingChildComponent && warn$2(`$attrs is readonly.`, vm);}, true);defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {!isUpdatingChildComponent && warn$2(`$listeners is readonly.`, vm);}, true);}......
}对 $attrs和$listeners 进行响应式处理。
