const mountComponent = (
    initialVNode,
    container,
    anchor,
    parentComponent,
    parentSuspense,
    isSVG,
    optimized
  ) => {
    //創(chuàng)建組件實(shí)例
    const instance = (initialVNode.component = createComponentInstance(
      initialVNode,
      parentComponent,
      parentSuspense
    ));
    setupComponent(instance);
    if (instance.asyncDep) {
      //處理異步邏輯，suspense的時(shí)候在進(jìn)行講解
    }
    setupRenderEffect(
      instance,
      initialVNode,
      container,
      anchor,
      parentSuspense,
      isSVG,
      optimized
    );
  };

{
  app: null,
  config: {
    globalProperties: {},
    optionMergeStrategies: {},
    compilerOptions: {},
  },
  mixins: [],
  components: {}, 
  directives: {}, 
};

function normalizePropsOptions(comp, appContext, asMixin = false) {
  //獲取props的緩存
  const cache = appContext.propsCache;
  const cached = cache.get(comp);
  //這個(gè)緩存是一個(gè)type對(duì)應(yīng)一個(gè)[normalized, needCastKeys]
  //normalized表示合并了mixins和extends后的props
  if (cached) {
    return cached;
  }
  const raw = comp.props;
  const normalized = {};
  const needCastKeys = [];
  let hasExtends = false;
  if (!shared.isFunction(comp)) {
    //用于合并props的函數(shù),因?yàn)閑xtends和mixins
    //中還可以寫mixins和extends所以需要遞歸合并
    /**
     * 例如const mixins = [{
     *    extends:{},
     *    mixins:[{props}],
     *    props
     * }]
     */
    const extendProps = (raw) => {
      hasExtends = true;
      const [props, keys] = normalizePropsOptions(raw, appContext, true);
      //normalized為合并后的props
      shared.extend(normalized, props);
      if (keys) needCastKeys.push(...keys);
    };
    //首先合并全局注冊(cè)的mixins中的props屬性(最先合并的優(yōu)先級(jí)最低)
    if (!asMixin && appContext.mixins.length) {
      appContext.mixins.forEach(extendProps);
    }
    //然后合并extends屬性(中間合并的優(yōu)先級(jí)居中)
    //(extends功能與mixins幾乎一樣)但是更注重于繼承
    //并且extends不能是數(shù)組
    if (comp.extends) {
      extendProps(comp.extends);
    }
    //最后合并組件自身的mixins(最后合并的優(yōu)先級(jí)最高)
    if (comp.mixins) {
      comp.mixins.forEach(extendProps);
    }
  }
  //省略第二部分的代碼...
}

function normalizePropsOptions(comp, appContext, asMixin = false) {
  //省略第一部分的代碼...
  //如果沒(méi)有props且沒(méi)有全局的mixins
  //組件本身的mixins、extends則設(shè)置
  //當(dāng)前實(shí)例的props緩存為空
  if (!raw && !hasExtends) {
    if (shared.isObject(comp)) {
      cache.set(comp, shared.EMPTY_ARR);
    }
    return shared.EMPTY_ARR;
  }
  //處理這種類型props:['msg','hello']
  if (shared.isArray(raw)) {
    for (let i = 0; i < raw.length; i++) {
      if (!shared.isString(raw[i])) {
        console.warn(
          `props must be strings when using array syntax. ${raw[i]}`
        );
      }
      //將v-data-xxx轉(zhuǎn)化為駝峰式vDataXxx
      //但是不能以$開頭
      const normalizedKey = shared.camelize(raw[i]);
      if (validatePropName(normalizedKey)) {
        //將其變?yōu)閜rops:{"msg":{}}
        normalized[normalizedKey] = shared.EMPTY_OBJ;
      }
    }
  }
  //省略第三部分的代碼...
 }

export function normalizePropsOptions(comp, appContext, asMixin = false) {
  //省略第二部分代碼...
  if (shared.isArray(raw)) {
    //省略...
  }
  //處理props:{msg:String}
  else if (raw) {
    if (!shared.isObject(raw)) {
      warn(`invalid props options`, raw);
    }
    //循環(huán)遍歷所有的key
    for (const key in raw) {
      //"v-data-xxx"=>"vDataXxx"變?yōu)樾●劮迨?
      const normalizedKey = shared.camelize(key);
      //檢驗(yàn)key是否合法
      if (validatePropName(normalizedKey)) {
        const opt = raw[key]; //獲取value
        //如果獲取的value是數(shù)組或函數(shù)轉(zhuǎn)化則為{type:opt}
        //props:{"msg":[]||function(){}}=>
        //props:{"msg":{type:msg的值}}
        const prop = (normalized[normalizedKey] =
          shared.isArray(opt) || shared.isFunction(opt) ? { type: opt } : opt);
        if (prop) {
          //找到Boolean在prop.type中的位置 Boolean,["Boolean"]
          const booleanIndex = getTypeIndex(Boolean, prop.type);
          //找到String在prop.type中的位置
          const stringIndex = getTypeIndex(String, prop.type);
          prop[0] = booleanIndex > -1; //type中是否包含Boolean
          //type中不包含String或者Boolean的位置在String前面
          //例如:"msg":{type:["Boolean","String"]}
          prop[1] = stringIndex < 0 || booleanIndex < stringIndex;
          //如果有default屬性,或者type中包含Boolean放入needCastKeys中
          if (booleanIndex > -1 || shared.hasOwn(prop, "default")) {
            needCastKeys.push(normalizedKey);
          }
        }
      }
    }
  }
  const res = [normalized, needCastKeys];
  //設(shè)置緩存
  if (shared.isObject(comp)) {
    cache.set(comp, res);
  }
  return res; //返回合并后的normalized
}

export function normalizeEmitsOptions(comp, appContext, asMixin = false) {
  //獲取appContext中的緩存
  const cache = appContext.emitsCache;
  const cached = cache.get(comp);
  //如果已經(jīng)讀取過(guò)返回緩存
  if (cached !== undefined) {
    return cached;
  }
  //獲取組件的emits屬性{emits:['']}
  //還可以對(duì)象寫法{emits:{'':null||function(){}}}
  const raw = comp.emits;
  //最終的合并對(duì)象
  let normalized = {};
  let hasExtends = false;
  if (!shared.isFunction(comp)) {
    //合并emits的方法
    const extendEmits = (raw) => {
      const normalizedFromExtend = normalizeEmitsOptions(raw, appContext, true);
      if (normalizedFromExtend) {
        hasExtends = true;
        shared.extend(normalized, normalizedFromExtend);
      }
    };
    //最先合并appContext中的(優(yōu)先級(jí)最低)
    if (!asMixin && appContext.mixins.length) {
      appContext.mixins.forEach(extendEmits);
    }
    //然后合并實(shí)例的extends(優(yōu)先級(jí)居中)
    if (comp.extends) {
      extendEmits(comp.extends);
    }
    //最后合并組件自身的(優(yōu)先級(jí)最高)
    if (comp.mixins) {
      comp.mixins.forEach(extendEmits);
    }
  }
  if (!raw && !hasExtends) {
    //設(shè)置緩存
    if (shared.isObject(comp)) {
      cache.set(comp, null);
    }
    return null;
  }
  //即使emits:[]是數(shù)組最終也會(huì)被轉(zhuǎn)化為對(duì)象
  //emits:['m']=>emits:{'m':null}
  if (shared.isArray(raw)) {
    raw.forEach((key) => (normalized[key] = null));
  } else {
    //合并
    shared.extend(normalized, raw);
  }
  if (shared.isObject(comp)) {
    cache.set(comp, normalized);
  }
  return normalized;
}

<Comp id="a"></Comp>
//Comp組件 沒(méi)有對(duì)id的聲明,那么會(huì)放入attrs中
export default {
  props:{}
}

function createDevRenderContext(instance) {
  const target = {};
  //可通過(guò)_訪問(wèn)實(shí)例對(duì)象
  Object.defineProperty(target, `_`, {
    configurable: true,
    enumerable: false,
    get: () => instance,
  });
  Object.keys(publicPropertiesMap).forEach((key) => {
    Object.defineProperty(target, key, {
      configurable: true,
      enumerable: false,
      get: () => publicPropertiesMap[key](instance),
      set: shared.NOOP,
    });
  });
  return target;
}

const publicPropertiesMap = shared.extend(Object.create(null), {
  $: (i) => i, //獲取當(dāng)前實(shí)例
  $el: (i) => i.vnode.el,
  $data: (i) => i.data, //獲取實(shí)例的data
  $props: (i) => reactivity.shallowReadonly(i.props), //獲取props
  $attrs: (i) => reactivity.shallowReadonly(i.attrs),
  $slots: (i) => reactivity.shallowReadonly(i.slots),
  $refs: (i) => reactivity.shallowReadonly(i.refs),
  $emit: (i) => i.emit,
  //獲取options
  $options: (i) => resolveMergedOptions(i),
  //強(qiáng)制更新
  $forceUpdate: (i) => i.f || (i.f = () => queueJob(i.update)),
  // $nextTick: (i) => i.n || (i.n = nextTick.bind(i.proxy)),
  $watch: (i) => instanceWatch.bind(i),
  $parent: (i) => getPublicInstance(i.parent),
  $root: (i) => getPublicInstance(i.root),
});

function emit(instance, event, ...rawArgs) {
  //已經(jīng)卸載無(wú)須在執(zhí)行
  if (instance.isUnmounted) return;
  //獲取props
  const props = instance.vnode.props || shared.EMPTY_OBJ;
  //獲取經(jīng)過(guò)標(biāo)準(zhǔn)化的emits和props
  //emits:{方法名:null||function(){}}
  //如果為function代表的是驗(yàn)證函數(shù)
  const {
    emitsOptions,
    propsOptions: [propsOptions],
  } = instance;
  if (emitsOptions) {
    //警告用戶:調(diào)用了emit 但是沒(méi)有在emitOptions中找到,代表沒(méi)有聲明
    if (!(event in emitsOptions)) {
      if (!propsOptions || !(shared.toHandlerKey(event) in propsOptions)) {
        warn(
          `Component emitted event "${event}" but it is neither declared in ` +
            `the emits option nor as an "${shared.toHandlerKey(event)}" prop.`
        );
      }
    }
    //獲取驗(yàn)證函數(shù)
    else {
      const validator = emitsOptions[event];
      if (shared.isFunction(validator)) {
        //調(diào)用驗(yàn)證函數(shù),返回false則警告
        const isValid = validator(...rawArgs);
        if (!isValid) {
          warn(
            `Invalid event arguments: event validation failed for event "${event}".`
          );
        }
      }
    }
  }
  //省略第二部分代碼...
 }

<template>
  <Comp v-model.trim.number = "a" />
</template>
//編譯后
function render(_ctx, _cache) {
  const _component_Comp = _resolveComponent("Comp", true)
  return (_openBlock(), _createBlock(_component_Comp, {
    modelValue: _ctx.a,
    "onUpdate:modelValue": $event => ((_ctx.a) = $event),
    modelModifiers: { trim: true,number:true }
  }, null, 8, ["modelValue"]))
}

function emit(instance, event, ...rawArgs) {
  //省略第一部分代碼...
  let args = rawArgs;
  //判斷是否是v-model事件 => update:modelValue
  const isModelListener = event.startsWith("update:");
  const modelArg = isModelListener && event.slice(7); //modelValue
  if (modelArg && modelArg in props) {
    //獲取modifiersKey=>modelModifiers
    const modifiersKey = `${
      modelArg === "modelValue" ? "model" : modelArg
    }Modifiers`;
    //當(dāng)給組件傳遞v-model的時(shí)候
    //<Button v-model.trim="a"></Button>
    //當(dāng)這樣傳遞的時(shí)候會(huì)收到modelModifiers={trim:true}
    const { number, trim } = props[modifiersKey] || shared.EMPTY_OBJ;
    //對(duì)emit('',...args)傳遞給父組件的參數(shù)執(zhí)行trim()
    if (trim) {
      args = rawArgs.map((a) => a.trim());
    }
    if (number) {
      args = rawArgs.map(shared.toNumber);
    }
  }
  //省略第三部分代碼...
}

function emit(instance, event, ...rawArgs) {
  //省略第二部分的代碼...
  //這里是簡(jiǎn)單寫法，源碼實(shí)際上對(duì)
  //event這個(gè)字符串做了改造。
  let handler = props[event]
  //如果存在則執(zhí)行
  if (handler) {
    handler.apply(instance,args)
  }
  //如果有once事件,存入emitted,并執(zhí)行,以后不再執(zhí)行
  const onceHandler = props[handlerName + `Once`];
  if (onceHandler) {
    if (!instance.emitted) {
      instance.emitted = {};
    } else if (instance.emitted[handlerName]) {
      return;
    }
    instance.emitted[handlerName] = true;
    handler.apply(instance,args);
  }
}

export default {
  mixins:[{beforeCreate(){}}]
  beforeCreate(){}
}
//那么bc:[createBefore1,createBefore2]

function createComponentInstance(vnode, parent, suspense) {
  const type = vnode.type;
  const appContext = (parent ? parent.appContext : vnode.appContext) || {};
  const instance = {
    uid: uid++, //當(dāng)前實(shí)例的id
    vnode, //當(dāng)前實(shí)例對(duì)應(yīng)的vnode
    type, //當(dāng)前實(shí)例對(duì)應(yīng)的編譯后的.vue生成的對(duì)象
    parent, //當(dāng)前實(shí)例的父實(shí)例
    appContext, //app的上下文包含全局注入的插件,自定義指令等
    root: null, //當(dāng)前組件實(shí)例的根實(shí)例
    //響應(yīng)式觸發(fā)的更新next為null,
    //在更新的過(guò)程中父組件調(diào)用了子組件的
    //instance.update會(huì)賦值next為最新組件vnode
    next: null,
    subTree: null, //調(diào)用render函數(shù)后的Vnode(處理了透?jìng)?
    effect: null, //實(shí)例的ReactiveEffect
    update: null, //副作用的scheduler
    scope: new EffectScope(true),
    //template編譯結(jié)果或setup返回值為函數(shù)
    //或.vue文件寫的template編譯為的render函數(shù)
    render: null, //渲染函數(shù)
    proxy: null, //代理后的ctx
    exposed: null, //調(diào)用了ctx.expose()方法(限制暴露的數(shù)據(jù))
    exposeProxy: null, //調(diào)用了getExposeProxy方法后的expose
    withProxy: null,
    //當(dāng)前組件的provides,父實(shí)例有則讀取父實(shí)例的否則讀取app上的
    //父組件的provides后續(xù)會(huì)掛載到prototype上,重新賦值當(dāng)前真實(shí)
    //的provide上,這樣可以通過(guò)原型鏈訪問(wèn)到所有上代組件中的provide
    provides: parent ? parent.provides : Object.create(appContext.provides),
    accessCache: null,
    renderCache: [],
    components: null, //當(dāng)前組件的可用組件
    directives: null, //當(dāng)前組件的自定義指令
    //合并mixins和extends中的props屬性
    propsOptions: normalizePropsOptions(type, appContext),
    //合并mixins和extends中的emits屬性
    emitsOptions: normalizeEmitsOptions(type, appContext),
    emit: null, //當(dāng)前實(shí)例調(diào)用emit的函數(shù)
    emitted: null, //含有once修飾符的,執(zhí)行一次后放入這里不再執(zhí)行
    propsDefaults: {}, //默認(rèn)props
    //是否透?jìng)鱝ttrs
    inheritAttrs: type.inheritAttrs,
    // state
    ctx: {}, //當(dāng)前實(shí)例的上下文也就是this
    data: {}, //data函數(shù)返回的值,被代理后才放入
    props: {}, //接受到的組件屬性
    attrs: {}, //接受到的標(biāo)簽屬性
    slots: {}, //組件傳遞的插槽內(nèi)容
    refs: {}, //存入的refs
    setupState: {}, //setup的返回值
    //expose attrs slots emit
    setupContext: null, //傳遞給setup的ctx(只有四個(gè)屬性)
    suspense,
    suspenseId: suspense ? suspense.pendingId : 0,
    asyncDep: null, //setup使用了async修飾符 返回的promise保存在這里
    asyncResolved: false,
    isMounted: false, //是否掛載
    isUnmounted: false, //是否卸載
    isDeactivated: false,
    bc: null, //beforeCreate
    c: null, //create
    bm: null, //beforeMount
    m: null, //mount
    bu: null, //beforeUpdate
    u: null, //update
    um: null, //unmount
    bum: null, //beforeUnmount
    //若組件實(shí)例是 <KeepAlive> 緩存樹的一部分，
    //當(dāng)組件從 DOM 中被移除時(shí)調(diào)用。deactivated
    da: null,
    //若組件實(shí)例是 <KeepAlive> 緩存樹的一部分，
    //當(dāng)組件被插入到 DOM 中時(shí)調(diào)用。activated
    a: null,
    //在一個(gè)響應(yīng)式依賴被組件觸發(fā)了重新渲染之后調(diào)用。
    //renderTriggered
    rtg: null,
    //在一個(gè)響應(yīng)式依賴被組件的渲染作用追蹤后調(diào)用。
    //renderTracked
    rtc: null,
    /**
     * 錯(cuò)誤捕獲鉤子
     * 組件渲染
     * 事件處理器
     * 生命周期鉤子
     * setup() 函數(shù)
     * 偵聽(tīng)器
     * 自定義指令鉤子
     * 過(guò)渡鉤子
     * 錯(cuò)誤捕獲鉤子
     */
    ec: null, //errorHandler
    sp: null, //serverPrefetch
  };
  //創(chuàng)建實(shí)例的上下文
  instance.ctx = createDevRenderContext(instance);
  //當(dāng)前實(shí)例的根實(shí)例
  instance.root = parent ? parent.root : instance;
  instance.emit = emit.bind(null, instance);
  if (vnode.ce) {
    vnode.ce(instance);
  }
  return instance;
}