function setupComponent(instance) {
  //獲取vnode的props(真正傳遞的props)
  const { props, children } = instance.vnode;
  //判斷當(dāng)前是否是有狀態(tài)組件組件
  const isStateful = isStatefulComponent(instance);
  //通過(guò)傳遞的真實(shí)props和聲明的props 分離組件參數(shù)
  //組件參數(shù)放入props中 其余放入instance.attrs
  //處理了props的default情況等
  initProps(instance, props, isStateful);
  //初始化插槽
  initSlots(instance, children);
  //驗(yàn)證名稱(chēng)是否合法,components中的組件名稱(chēng)是否
  //合法,代理instance.ctx,創(chuàng)建setup函數(shù)的ctx,調(diào)用setup函數(shù)
  //處理得到的結(jié)果
  const setupResult = isStateful ? 
        setupStatefulComponent(instance) : undefined;
  return setupResult;
}

function isStatefulComponent(instance) {
  return instance.vnode.shapeFlag & 
         ShapeFlags.STATEFUL_COMPONENT;
}

function initProps(instance, rawProps, isStateful) {
  //定義需要放入的
  const props = {};
  const attrs = {};
  //attrs.__vInternal = 1
  shared.def(attrs, InternalObjectKey, 1);
  //創(chuàng)建propsDefaults
  instance.propsDefaults = Object.create(null);
  //將真實(shí)傳遞的props分配給instance的props和attrs
  setFullProps(instance, rawProps, props, attrs);
  //遍歷normalized(合并和的props)
  for (const key in instance.propsOptions[0]) {
    if (!(key in props)) {
      props[key] = undefined;
    }
  }
  //最后將分配好的props和attrs賦值到instance
  if (isStateful) {
    instance.props = reactivity.shallowReactive(props);
  } else {
    //不存在type.props則讓props為attrs
    if (!instance.type.props) {
      instance.props = attrs;
    } else {
      instance.props = props;
    }
  }
  instance.attrs = attrs;
}

function setFullProps(instance, rawProps, props, attrs) {
  //獲取通過(guò)mixins和extends合并的props
  const [options, needCastKeys] = instance.propsOptions;
  let hasAttrsChanged = false; //attrs是否發(fā)生改變
  let rawCastValues;
  if (rawProps) {
    for (let key in rawProps) {
      //如果key是"ref" "key" "ref_for" "ref_key"
      //"onVnodeBeforeMount" "onVnodeMounted"
      //"onVnodeBeforeUpdate "onVnodeUpdated"
      //"onVnodeBeforeUnmount" "onVnodeUnmounted"
      //那么就跳過(guò)
      if (shared.isReservedProp(key)) {
        continue;
      }
      //獲取rawProps:{a:1}=>value=1
      const value = rawProps[key];
      let camelKey; //小駝峰式的key
      if (
        options &&
        shared.hasOwn(options, (camelKey = shared.camelize(key)))
      ) {
        //這個(gè)key不是含有default屬性的
        if (!needCastKeys || !needCastKeys.includes(camelKey)) {
          props[camelKey] = value;
        }
        //props:{"msg":{default:"a"}}
        //含有default屬性的放入rawCastValues中
        else {
          (rawCastValues || (rawCastValues = {}))[camelKey] = value;
        }
      }
      //判斷當(dāng)前的key是否是用于emits的
      else if (!isEmitListener(instance.emitsOptions, key)) {
        //不是emit自定義事件的key也不是組件參數(shù)那么就是attrs
        if (!(key in attrs) || value !== attrs[key]) {
          attrs[key] = value;
          hasAttrsChanged = true;
        }
      }
    }
  }
  /**
   *
   * 這里涉及到四個(gè)屬性instance, rawProps, props, attrs
   * instance:是當(dāng)前組件的實(shí)例
   * rawProps:真正傳遞的props可能含有組件參數(shù)props,
   * 標(biāo)簽屬性attrs,自定義emit事件
   * props:代表聲明并且接受到的props
   * attrs:代表沒(méi)有聲明props也不屬于emits屬性的屬性
   * needCastKeys:代表需要特殊處理的屬性
   * 例如props:{msg:{default:"a"}}那么msg會(huì)被放入
   * needCastKeys中
   *
   */
  if (needCastKeys) {
    //獲取非響應(yīng)式的props
    const rawCurrentProps = reactivity.toRaw(props);
    const castValues = rawCastValues || {};
    for (let i = 0; i < needCastKeys.length; i++) {
      const key = needCastKeys[i]; //msg
      //對(duì)于有default的屬性進(jìn)行重設(shè)
      //props:{msg:{default:"a"}}
      props[key] = resolvePropValue(
        options, //合并mixins和extends后的props(定義方)
        rawCurrentProps, //非響應(yīng)式的props(接受方)
        key, //(含有default)的key "msg"
        //例如傳遞了"msg":1 定義了:props:{msg:{default:"a"}}
        //castValues[key]=1
        castValues[key],
        instance, //實(shí)例
        !shared.hasOwn(castValues, key)
      );
    }
  }
  return hasAttrsChanged;
}

function resolvePropValue(options, props, key, value, instance, isAbsent) {
  //獲取{msg:{default:"a"}}中的{default:"a"}
  const opt = options[key];
  if (opt != null) {
    //判斷是否有default屬性
    const hasDefault = shared.hasOwn(opt, "default");
    //如果定義了default但是沒(méi)有接受到value值
    if (hasDefault && value === undefined) {
      const defaultValue = opt.default;
      //如果需要接受的類(lèi)型不是函數(shù),但是接受到了函數(shù)
      //看看實(shí)例的propsDefaults是否有當(dāng)前key的值
      //還是沒(méi)有則調(diào)用這個(gè)defaultValue函數(shù)取得值
      if (opt.type !== Function && shared.isFunction(defaultValue)) {
        const { propsDefaults } = instance;
        if (key in propsDefaults) {
          value = propsDefaults[key];
        } else {
          //包裹是為了在調(diào)用這個(gè)函數(shù)的時(shí)候
          //獲取當(dāng)前實(shí)例不會(huì)出錯(cuò)
          setCurrentInstance(instance);
          value = propsDefaults[key] = defaultValue.call(null, props);
          unsetCurrentInstance();
        }
      }
      //設(shè)置為默認(rèn)值
      else {
        value = defaultValue;
      }
    }
    //需要接受的類(lèi)型是Boolean
    if (opt[0]) {
      //沒(méi)有設(shè)置默認(rèn)值,也沒(méi)有傳遞這個(gè)值則為false
      if (isAbsent && !hasDefault) {
        value = false;
      }
      //<Comp yes></Comp>并且聲明了yes則設(shè)置為true
      else if (opt[1] && value === "") {
        value = true;
      }
    }
  }
  return value;
}

function initSlots(instance, children) {
  //判斷當(dāng)前實(shí)例的children是否是slots
  if (instance.vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
    const type = children._; //獲取shapeSlots
    //有"_"標(biāo)識(shí)表示是通過(guò)compiler編譯得到的
    if (type) {
      //如果有SLOTS_CHILDREN標(biāo)識(shí) 表示children就是slots屬性
      instance.slots = reactivity.toRaw(children);
      //將_屬性變?yōu)椴豢擅杜e屬性
      shared.def(children, "_", type);
    } else {
      /**
       * render(){
       *   return h(Comp,null,{
       *     default:()=>h("div",null),
       *     header:()=>h("div",null)
       *   })
       * }
       * 沒(méi)有則表示用戶(hù)自己寫(xiě)了render函數(shù)
       * 這個(gè)時(shí)候用戶(hù)可能不會(huì)添加"_"屬性
       * 所以需要對(duì)slots進(jìn)行標(biāo)準(zhǔn)化
       */
      normalizeObjectSlots(children, (instance.slots = {}));
    }
  } else {
    instance.slots = {};
    //如果children為字符串或者null或數(shù)組情況
    if (children) {
      normalizeVNodeSlots(instance, children);
    }
  }
  //標(biāo)識(shí)slots為內(nèi)部屬性
  shared.def(instance.slots, InternalObjectKey, 1);
}

<template>
  <Comp>
    我是插槽內(nèi)容
  </Comp>
</template>
//編譯后
function render(_ctx, _cache) {
  const _component_Comp = _resolveComponent("Comp", true)
  return (_openBlock(),
          _createBlock(_component_Comp, null, {
    default: _withCtx(() => [
      _createTextVNode(" 我是插槽內(nèi)容 ")
    ]),
    _: 1 /* STABLE */
  }))
}

const normalizeObjectSlots = (rawSlots, slots, instance) => {
  const ctx = rawSlots._ctx;
  for (const key in rawSlots) {
    //_開(kāi)頭或者$stable跳過(guò)
    //這將允許設(shè)置不進(jìn)行標(biāo)準(zhǔn)化的插槽
    if (isInternalKey(key)) continue;
    //獲取slots的值
    const value = rawSlots[key];
    //如果value已經(jīng)是一個(gè)函數(shù)了,需要包裹withCtx執(zhí)行
    //進(jìn)行標(biāo)準(zhǔn)化 都需要改成通過(guò)編譯的樣子
    if (shared.isFunction(value)) {
      //給instance.slots賦值
      slots[key] = normalizeSlot(key, value, ctx);
    }
    /**
     * 用戶(hù)不寫(xiě)函數(shù),拋出警告,使用函數(shù)的性能將會(huì)更好
     * render(){
     *   return createVnode(Comp,null,{
     *      default:createVnode('div',null)
     *   })
     * }
     */
    else if (value != null) {
      console.warn(
        `Non-function value encountered for slot "${key}". ` +
          `Prefer function slots for better performance.`
      );
      //經(jīng)過(guò)normalizeSlotValue處理 返回的createVnode一定通過(guò)數(shù)組包裹
      const normalized = normalizeSlotValue(value);
      slots[key] = () => normalized;
    }
  }
};

const normalizeSlot = (key, rawSlot, ctx) => {
  //已經(jīng)經(jīng)過(guò)標(biāo)準(zhǔn)化的slot不需要在進(jìn)行標(biāo)準(zhǔn)化
  if (rawSlot._n) {
    return rawSlot;
  }
  const normalized = withCtx((...args) => {
    if (getCurrentInstance()) {
      warn(
        `Slot "${key}" invoked outside of the render function: ` +
          `this will not track dependencies used in the slot. ` +
          `Invoke the slot function inside the render function instead.`
      );
    }
    //標(biāo)準(zhǔn)化插槽的值 rawSlot=> default:()=>createVnode('div',null)
    return normalizeSlotValue(rawSlot(...args));
  }, ctx);
  //表示不是經(jīng)過(guò)compiler編譯的,是用戶(hù)自己寫(xiě)的render函數(shù)
  normalized._c = false;
  return normalized;
};

function withCtx(
  fn,
  ctx = getCurrentRenderingInstance(),
  isNonScopedSlot
) {
  if (!ctx) return fn;
  if (fn._n) {
    return fn;
  }
  //設(shè)置currentRenderingInstance,通過(guò)閉包確保調(diào)用fn的時(shí)候
  //currentRenderingInstance實(shí)例為當(dāng)前實(shí)例
  /**
   * 如果用戶(hù)調(diào)用模板表達(dá)式內(nèi)的插槽
   *  <Button>
   *    <template>
   *      <slot></slot>
   *    </template>
   *  </Button>
   * 可能會(huì)擾亂塊跟蹤,因此默認(rèn)情況下,禁止塊跟蹤，當(dāng)
   * 調(diào)用已經(jīng)編譯的插槽時(shí)強(qiáng)制跳出(由.d標(biāo)志指示)。
   * 如果渲染已編譯的slot則無(wú)需執(zhí)行此操作、因此
   * 我們?cè)趓enderSlot中調(diào)用renderFnWithContext
   * 時(shí),.d設(shè)置為false
   */
  const renderFnWithContext = (...args) => {
    //禁止塊追蹤,將isBlockTreeEnabled設(shè)置為0將會(huì)停止追蹤
    if (renderFnWithContext._d) {
      setBlockTracking(-1);
    }
    const prevInstance = setCurrentRenderingInstance(ctx);
    const res = fn(...args);
    setCurrentRenderingInstance(prevInstance);
    //開(kāi)啟塊追蹤
    if (renderFnWithContext._d) {
      setBlockTracking(1);
    }
    return res;
  };
  //如果已經(jīng)是renderFnWithContext則不需要在包裝了
  renderFnWithContext._n = true; //_n表示已經(jīng)經(jīng)過(guò)renderFnWithContext包裝
  renderFnWithContext._c = true; //表示經(jīng)過(guò)compiler編譯得到
  //true代表禁止塊追蹤,false代表開(kāi)啟塊追蹤
  renderFnWithContext._d = true;
  return renderFnWithContext;
}

function normalizeSlotValue(value){
  if(shared.isArray(value)){
    return value.map(normalizeVNode)
  }
  return [normalizeVNode(value)] 
}

//自己寫(xiě)render函數(shù)
export default {
  render(){
    return createVNode(Comp,null,{
      default:()=>([
       createVNode('div',null),
       createVNode('div',null)
       ])
    })
  }
}
//如果是正常編譯獲得的那么應(yīng)該是

export default{
  render(){
    return createVNode(Comp,null,{
      default:()=>createTextVNode('123')
    })
  }
}

//自己寫(xiě)render函數(shù)
export default {
  render(){
    return createVNode(Comp,null,{
      default:()=>123
    })
  }
}

function normalizeVNode(child) {
  if (child == null || typeof child === "boolean") {
    //沒(méi)有child或者沒(méi)有實(shí)質(zhì)性?xún)?nèi)容創(chuàng)建注釋節(jié)點(diǎn)
    return createVNode(Comment);
  } else if (shared.isArray(child)) {
    //用戶(hù)直接寫(xiě)了一個(gè)數(shù)組,需要包裹一層Fragment
    return createVNode(Fragment, null, child.slice());
  }
  //如果這個(gè)節(jié)點(diǎn)已經(jīng)掛載過(guò)了克隆這個(gè)節(jié)點(diǎn)(復(fù)用節(jié)點(diǎn))
  else if (typeof child === "object") {
    return cloneIfMounted(child);
  }
  //string 或者 number
  else {
    return createVNode(Text, null, String(child));
  }
}

render(){
  return createVNode(Comp,null,{
    default:createVNode('div')
  })
}
//經(jīng)過(guò)標(biāo)準(zhǔn)化后,相當(dāng)于
render(){
  return createVNode(Comp,null,{
    default:withCtx(()=>[createVNode('div')])
  })
}
//其他的情況都差不多，都是為了標(biāo)準(zhǔn)化為
//滿(mǎn)足上面四個(gè)條件的樣子

const normalizeVNodeSlots = (instance, children) => {
  const normalized = normalizeSlotValue(children);
  instance.slots.default = () => normalized;
};

//掛載過(guò)的vnode有el屬性
function cloneIfMounted(child) {
  return child.el === null || child.memo ? 
         child : cloneVNode(child);
}

function mergeProps(...args) {
  const ret = {};
  for (let i = 0; i < args.length; i++) {
    const toMerge = args[i];
    for (const key in toMerge) {
      //結(jié)合class
      if (key === "class") {
        if (ret.class !== toMerge.class) {
          ret.class = shared.normalizeClass([ret.class, toMerge.class]);
        }
      }
      //結(jié)合style屬性
      else if (key === "style") {
        ret.style = shared.normalizeStyle([ret.style, toMerge.style]);
      }
      else if (key !== "") {
        ret[key] = toMerge[key];
      }
    }
  }
  return ret;
}

function cloneVNode(vnode, extraProps, mergeRef = false) {
  const { props, ref, patchFlag, children } = vnode;
  const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props;
  const cloned = {
    //省略了大量屬性，其他的屬性和傳遞的
    //vnode一樣，這里只列舉了可能被改變的
    key: mergedProps && normalizeKey(mergedProps),
    ref:
      extraProps && extraProps.ref
        ? mergeRef && ref
          ? shared.isArray(ref)
            ? ref.concat(normalizeRef(extraProps))
            : [ref, normalizeRef(extraProps)]
          : normalizeRef(extraProps)
        : ref,
    children:
      patchFlag === PatchFlags.HOISTED && shared.isArray(children)
        ? children.map(deepCloneVNode)
        : children,
    shapeFlag: vnode.shapeFlag,
    patchFlag:
      extraProps && vnode.type !== Fragment
        ? patchFlag === PatchFlags.HOISTED
          ? PatchFlags.FULL_PROPS
          : patchFlag | PatchFlags.FULL_PROPS
        : patchFlag,
  };
  return cloned;
}
function deepCloneVNode(vnode) {
    const cloned = cloneVNode(vnode);
    if (shared.isArray(vnode.children)) {
        cloned.children = vnode.children.map(deepCloneVNode);
    }
    return cloned;
}