vue原理分析（十一）研究new Vue()中的initRender

在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/props
  initState(vm);
  initProvide(vm); // resolve provide after data/props
  callHook$1(vm, 'created');
  ......
}

上一篇中已经研究了initEvents，今天我们往下研究

initRender(vm);

function initRender(vm) {
  vm._vnode = null; // the root of the child tree
  vm._staticTrees = null; // v-once cached trees
  const options = vm.$options;
  const parentVnode = (vm.$vnode = options._parentVnode); // the placeholder node in parent tree
  const 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-error
  vm._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-error
  vm.$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 updated
  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);
  }
}

function initRender(vm) {
  vm._vnode = null; // the root of the child tree
  vm._staticTrees = null; // v-once cached trees
  const options = vm.$options;
  const parentVnode = (vm.$vnode = options._parentVnode); // the placeholder node in parent tree
  const 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的slot
        if (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-error
  vm._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-error
  vm.$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  进行响应式处理。