mount(rootContainer) {
 //判斷當(dāng)前返回的app是否已經(jīng)調(diào)用過mount方法
 if (!isMounted) {
 //如果當(dāng)前組件已經(jīng)有了app
 //實例則已經(jīng)掛載了警告用戶
 if (rootContainer.__vue_app__) {
  console.warn(
   `There is already an app instance mounted on the host container.\n` +
   ` If you want to mount another app on the same host container,` +
   ` you need to unmount the previous app by calling \`app.unmount()\` first.`
  );
 }
 //創(chuàng)建組件的VNode
 const vNode = createVNode(rootComponent);
 //剛才調(diào)用createApp創(chuàng)建的上下文
 vNode.appContext = context;
 render(vNode, rootContainer); //渲染虛擬DOM
 //標(biāo)記已經(jīng)掛載了
 isMounted = true;
 //建立app與DOM的關(guān)聯(lián)
 app._container = rootContainer;
 rootContainer.__vue_app__ = app;
 //建立app與組件的關(guān)聯(lián)
 app._instance = vNode.component;
 }
 //已經(jīng)調(diào)用過mount方法 警告用戶
 else {
  console.warn(
   `App has already been mounted.\n` +
   `If you want to remount the same app, move your app creation logic ` +
   `into a factory function and create fresh app instances for each ` +
   `mount - e.g. \`const createMyApp = () => createApp(App)\``
  );
 }
}

export const ShapeFlags = {
  ELEMENT: 1, //HTML SVG 或普通DOM元素
  FUNCTIONAL_COMPONENT: 2, //函數(shù)式組件
  STATEFUL_COMPONENT: 4, //有狀態(tài)組件
  COMPONENT: 6, //2,4的綜合表示所有組件
  TEXT_CHILDREN: 8, //子節(jié)點為純文本
  ARRAY_CHILDREN: 16, //子節(jié)點是數(shù)組
  SLOTS_CHILDREN: 32, //子節(jié)點包含插槽
  TELEPORT: 64, //Teleport
  SUSPENSE: 128, //suspense
};

function createVNode(
  type,//編譯后的.vue文件形成的對象
  //<Comp hello="h"></Comp>
  //給組件傳遞的props
  props = null,
  children = null,//子組件
  patchFlag = 0,//patch的類型
  dynamicProps = null,//動態(tài)的props
  isBlockNode = false//是否是block節(jié)點
) {
  //通過__vccOpts判斷是否是class組件
  if (isClassComponent(type)) {
    type = type.__vccOpts;
  }
  //將非字符串的class轉(zhuǎn)化為字符串
  //將代理過的style淺克隆在轉(zhuǎn)為標(biāo)準(zhǔn)化
  if (props) {
    //對于代理過的對象,我們需要克隆來使用他們
    //因為直接修改會導(dǎo)致觸發(fā)響應(yīng)式
    props = guardReactiveProps(props);
    let { class: klass, style } = props;
    if (klass && !shared.isString(klass)) {
      props.class = shared.normalizeClass(klass);
    }
    if (shared.isObject(style)) {
      if (reactivity.isProxy(style) && !shared.isArray(style)) {
        style = shared.extend({}, style);
      }
      props.style = shared.normalizeStyle(style);
    }
  }
  //生成當(dāng)前type的類型
  let shapeFlag = 0;
  /*
    這部分我修改了源碼,便于讀者理解
    suspense teleport放到前面是因為
    他們本身就是一個對象,如果放到后面
    會導(dǎo)致先中標(biāo)isObject那么shapeFlag
    的賦值會出錯。
    判斷當(dāng)前type的類型,賦值給shapeFlag
    后續(xù)就可以通過shapeFlag來判斷當(dāng)前虛擬
    節(jié)點的類型。
  */
  if (isString(type)) {
    //div span p等是ELEMENT
    shapeFlag = ShapeFlags.ELEMENT;
  } else if (isSuspense(type)) {
    shapeFlag = ShapeFlags.SUSPENSE;
  } else if (isTeleport(type)) {
    shapeFlag = ShapeFlags.TELEPORT;
  } else if (isObject(type)) {
    //對象則是有狀態(tài)組件
    shapeFlag = ShapeFlags.STATEFUL_COMPONENT;
  } else if (isFunction(type)) {
    //如果是函數(shù)代表是無狀態(tài)組件
    shapeFlag = ShapeFlags.FUNCTIONAL_COMPONENT;
  }
  //調(diào)用更基層的方法處理
  return createBaseVNode(
    type,
    props,
    children,
    patchFlag,
    dynamicProps,
    shapeFlag,
    isBlockNode,
    true
  );
}

<template>
  <div :class="{hello:true}" 
       :style="[{color:'red'},'background:red']">
  </div>
</template>
//編譯后
const _hoisted_1 = {
  class:_normalizeClass({hello:true}),
  style:_normalizeStyle([{color:'red'},'background:red'])
}
function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1))
}

//{hello:true,yes:false}=>"hello"
function normalizeClass(value) {
  let res = "";
  if (isString(value)) {
    res = value;
  } else if (isArray(value)) {
    for (let i = 0; i < value.length; i++) {
      const normalized = normalizeClass(value[i]);
      if (normalized) {
        res += normalized + " ";
      }
    }
  } else if (isObject(value)) {
    for (const name in value) {
      if (value[name]) {
        res += name + " ";
      }
    }
  }
  return res.trim();
}

//[{backgroundColor:'red',"color:red;"}]=>
//{backgroundColor:'red',color:'red'}
export function normalizeStyle(value) {
  if (isArray(value)) {
    const res = {};
    for (let i = 0; i < value.length; i++) {
      const item = value[i];
      const normalized = isString(item)
        ? parseStringStyle(item)
        : normalizeStyle(item);
      if (normalized) {
        for (const key in normalized) {
          res[key] = normalized[key];
        }
      }
    }
    return res;
  } else if (isString(value)) {
    return value;
  } else if (isObject(value)) {
    return value;
  }
}

const isSuspense = type => type.__isSuspense;
const isTeleport = type => type.__isTeleport;

function createBaseVNode(
  type,//創(chuàng)建的虛擬節(jié)點的類型
  props = null,//傳遞的props
  children = null,//子節(jié)點
  patchFlag = 0,//patch類型
  dynamicProps = null,//動態(tài)props
  shapeFlag = type === Fragment ? 0 : 1,//當(dāng)前虛擬節(jié)點的類型
  isBlockNode = false,//是否是block
  needFullChildrenNormalization = false//是否需要標(biāo)準(zhǔn)化children
) {
  const vnode = {
    __v_isVNode: true, //這是一個vnode
    __v_skip: true, //不進(jìn)行響應(yīng)式代理
    type, //.vue文件編譯后的對象
    props, //組件收到的props
    key: props && normalizeKey(props), //組件key
    ref: props && normalizeRef(props), //收集到的ref
    scopeId: getCurrentScopeId(),//當(dāng)前作用域ID
    slotScopeIds: null, //插槽ID
    children, //child組件
    component: null, //組件實例
    suspense: null,//存放suspense
    ssContent: null,//存放suspense的default的虛擬節(jié)點
    ssFallback: null,//存放suspense的fallback的虛擬節(jié)點
    dirs: null, //解析到的自定義指令
    transition: null,
    el: null, //對應(yīng)的真實DOM
    anchor: null, //插入的錨點
    target: null,//teleport的參數(shù)to指定的DOM
    targetAnchor: null,//teleport插入的錨點
    staticCount: 0,
    shapeFlag, //表示當(dāng)前vNode的類型
    patchFlag, //path的模式
    dynamicProps, //含有動態(tài)的props
    dynamicChildren: null, //含有的動態(tài)children
    appContext: null, //app上下文
  };
  //是否需要對children進(jìn)行標(biāo)準(zhǔn)化
  if (needFullChildrenNormalization) {
    normalizeChildren(vnode, children);
    //處理SUSPENSE邏輯
    if (shapeFlag & ShapeFlags.SUSPENSE) {
      //賦值ssContent=>default和ssFallback=>fallback
      type.normalize(vnode);
    }
  }
  //設(shè)置shapeFlags
  else if (children) {
    vnode.shapeFlag |= shared.isString(children)
      ? ShapeFlags.TEXT_CHILDREN
      : ShapeFlags.ARRAY_CHILDREN;
  }
  //警告key不能為NaN
  if (vnode.key !== vnode.key) {
    warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type);
  }
  //判斷是否加入dynamicChildren
  if (
    getBlockTreeEnabled() > 0 && //允許追蹤
    !isBlockNode && //當(dāng)前不是block
    getCurrentBlock() && //currentBlock存在
    //不是靜態(tài)節(jié)點,或者是組件
    (vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
    vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
  ) {
    //放入dynamicChildren
    getCurrentBlock().push(vnode);
  }
  return vnode;
}

//為了便于閱讀修改了源碼
function normalizeKey(props){
 const {key} = props
 return key != null ? key : null
}

function normalizeRef(props) {
 const { ref, ref_for, ref_key } = props;
 if (ref != null) {
  if (isString(ref) || isRef(ref) || isFunction(ref)) {
   const res = {
    //當(dāng)前渲染的組件實例
    i: getCurrentRenderingInstance(),
    r: ref,
    k: ref_key,
    //<div v-for="a in c" ref="b"></div>
    //同時使用了ref和v-for會標(biāo)記
    f: !!ref_for,
   };
   return res;
  }
  return ref
 }
 return null
}

<template>
  <Comp>
    <template v-slot:default>
      <div></div>
    </template>
    <template v-slot:header></template>
  </Comp>
</template>
//編譯后
const _hoisted_1 = _createElementVNode("div", null, null, -1 /* HOISTED */)
function render(_ctx, _cache) {
  const _component_Comp = _resolveComponent("Comp", true)
  return (_openBlock(), _createBlock(_component_Comp, null, {
    default: _withCtx(() => [
      _hoisted_1
    ]),
    header: _withCtx(() => []),
    _: 1 /* STABLE */
  }))
}

//STABLE
<Comp>
  <template v-slot:default></template>
</Comp>
//DYNAMIC
<Comp>
  <template v-slot:default v-if="a"></template>
</Comp>
//FORWORD
<Comp>
  <slot name="default"></slot>
</Comp>

function normalizeChildren(vnode, children) {
  let type = 0;//設(shè)置shapeFlag的初始值
  const { shapeFlag } = vnode;
  const currentRenderingInstance = getCurrentRenderingInstance();
  if (children == null) {
    children = null;
  }
  //如果children是數(shù)組,設(shè)置shapeFlags為ARRAY_CHILDREN
  //用戶可以寫createVNode(Comp,null,[Vnode1,Vnode2])
  //這樣的形式,但是不推薦
  else if (shared.isArray(children)) {
    type = ShapeFlags.ARRAY_CHILDREN;
  }
  //處理"<Comp>插槽內(nèi)容</Comp>"這種情況
  //如果你一定要自己寫render函數(shù)官方推薦
  //對象形式,并返回一個函數(shù)的類型
  //createVNode(Comp,null.{default:()=>Vnode})
  else if (typeof children === "object") {
    //處理TELEPORT情況或ELEMENT情況
    if (shapeFlag & (ShapeFlags.ELEMENT | ShapeFlags.TELEPORT)) {
      //忽略這里的代碼...
    }
    //這里對vnode打上slot的標(biāo)識
    else {
      type = ShapeFlags.SLOTS_CHILDREN;
      //獲取當(dāng)前slot的slotFlag
      const slotFlag = children._;
      if (!slotFlag && !(InternalObjectKey in children)) {
        children._ctx = currentRenderingInstance;
      }
      //在組件中引用了當(dāng)前slot 例如:<Comp><slot></slot></Comp>
      //這里的slot是當(dāng)前組件實例傳遞的插槽就會被標(biāo)記為FORWARDED
      else if (slotFlag === SlotFlags.FORWARDED && currentRenderingInstance) {
        //這里是引用當(dāng)前實例傳遞的slot所以傳遞給children的slot類型
        //依然延續(xù)當(dāng)前實例傳遞的slot
        if (currentRenderingInstance.slots._ === SlotFlags.STABLE) {
          children._ = SlotFlags.STABLE;
        } else {
          children._ = SlotFlags.DYNAMIC;
          //添加DYNAMIC_SLOTS
          vnode.patchFlag |= PatchFlags.DYNAMIC_SLOTS;
        }
      }
    }
  }
  //兼容函數(shù)寫法
  /**
   * createVnode(Comp,null,()=>h())
   * children為作為default
   */
  else if (shared.isFunction(children)) {
    //重新包裝children
    children = { default: children, _ctx: currentRenderingInstance };
    type = ShapeFlags.SLOTS_CHILDREN;
  } else {
    children = String(children);
    //強(qiáng)制讓teleport children變?yōu)閿?shù)組為了讓他可以在任意處移動
    if (shapeFlag & ShapeFlags.TELEPORT) {
      type = ShapeFlags.ARRAY_CHILDREN;
      children = [createTextVNode(children)];
    }
    //child為text
    else {
      type = ShapeFlags.TEXT_CHILDREN;
    }
  }
  //掛載children、shapeFlag到vnode上
  vnode.children = children;
  vnode.shapeFlag |= type;
}

// Comment = Symbol('comment')
function createCommentVNode(text = "", asBlock = false) {
  return asBlock
    ? (openBlock(), createBlock(Comment, null, text))
    : createVNode(Comment, null, text);
}

// Text = Symbol('text')
function createTextVNode(text = " ", flag = 0) {
  return createVNode(Text, null, text, flag);
}

//Static = Symbol('static')
function createStaticVNode(content, numberOfNodes) {
  const vnode = createVNode(Static, null, content);
  vnode.staticCount = numberOfNodes;
  return vnode;
}

const render = (vnode, container) => {
  if (vnode == null) {
    //已經(jīng)存在了 則卸載
    if (container._vnode) {
      unmount(container._vnode, null, null, true);
    }
  } else {
    //掛載元素
    patch(container._vnode || null, vnode, container, null, null, null);
  }
  flushPreFlushCbs();
  flushPostFlushCbs();
  //對于掛載過的container設(shè)置_vnode
  container._vnode = vnode;
};

  const PatchFlags = {
  DEV_ROOT_FRAGMENT: 2048,
  //動態(tài)插槽
  DYNAMIC_SLOTS: 1024,
  //不帶key的fragment
  UNKEYED_FRAGMENT: 256,
  //帶key的fragment
  KEYED_FRAGMENT: 128,
  //穩(wěn)定的fragment
  STABLE_FRAGMENT: 64,
  //帶有監(jiān)聽事件的節(jié)點
  HYDRATE_EVENTS: 32,
  FULL_PROPS: 16, //具有動態(tài):key,key改變需要全量比較
  PROPS: 8, //動態(tài)屬性但不包含style class屬性
  STYLE: 4, //動態(tài)的style
  CLASS: 2, //動態(tài)的class
  TEXT: 1, //動態(tài)的文本
  HOISTED: -1, //靜態(tài)節(jié)點
  BAIL: -2, //表示diff應(yīng)該結(jié)束
};

const patch = (
  beforeVNode,//之前的Vnode
  currentVNode,//當(dāng)前的Vnode
  container,//掛載的容器DOM
  anchor = null,//掛載的錨點
  parentComponent = null,//父組件
  parentSuspense = null,//父suspense
  isSVG = false,//是否是SVG
  slotScopeIds = null,//當(dāng)前的插槽作用域ID
  //是否開啟優(yōu)化
  optimized = !!currentVNode.dynamicChildren
) => {
  //兩個VNode相等 不做處理
  if (beforeVNode === currentVNode) {
    return null;
  }
  //如果不是同一個節(jié)點,卸載
  if (beforeVNode && !isSameVNodeType(beforeVNode, currentVNode)) {
    anchor = getNextHostNode(beforeVNode);
    unmount(beforeVNode, parentComponent, parentSuspense, true);
    beforeVNode = null;
  }
  if (currentVNode.patchFlag === PatchFlags.BAIL) {
    optimized = false;
    currentVNode.dynamicChildren = null;
  }
  const { type, ref, shapeFlag } = currentVNode;
  switch (type) {
    case Text:
      //處理Text
      break;
    case Comment:
      //處理注釋節(jié)點
      break;
    case Static:
      //處理靜態(tài)節(jié)點
      break;
    case Fragment:
      //處理Fragment節(jié)點
      break;
    default:
      if (shapeFlag & ShapeFlags) {
        //處理Element類型
      } else if (shapeFlag & 6) {
        //處理組件類型
        processComponent(
          beforeVNode,
          currentVNode,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          slotScopeIds,
          optimized
        );
      } else if (shapeFlag & ShapeFlags.TELEPORT) {
        //處理Teleport
      } else if (shapeFlag & ShapeFlags.SUSPENSE) {
        //處理Suspense
      }
      //都不匹配報錯
      else {
        console.warn("Invalid VNode type:", type, `(${typeof type})`);
      }
  }
  //設(shè)置setupState和refs中的ref
  if (ref != null && parentComponent) {
    setRef(
      ref,
      beforeVNode && beforeVNode.ref,
      parentSuspense,
      currentVNode || beforeVNode,
      !currentVNode
    );
  }
};

function isSameVNodeType(beforeVNode,currentVNode){
  return (
    beforeVNode.type === currentVNode.type &&
    beforeVNode.key === currentVNode.key
  )
}

const getNextHostNode = (vnode) => {
  //如果當(dāng)前虛擬節(jié)點類型是組件,組件沒有真實DOM
  //找到subTree(render返回的節(jié)點)
  if (vnode.shapeFlag & ShapeFlags.COMPONENT) {
    return getNextHostNode(vnode.component.subTree);
  }
  //調(diào)用suspense的next方法獲取
  if (vnode.shapeFlag & ShapeFlags.SUSPENSE) {
    return vnode.suspense.next();
  }
  //獲取當(dāng)前節(jié)點的下一個兄弟節(jié)點
  return hostNextSibling(vnode.anchor || vnode.el);
};
//runtime-dom傳遞的方法
const nextSibling = node => node.nextSibling,

function setRef(
  rawRef,//當(dāng)前的ref
  oldRawRef,//之前的ref
  parentSuspense,
  vnode,
  isUnmount = false
) {
  //是數(shù)組,分別設(shè)置
  if (shared.isArray(rawRef)) {
    rawRef.forEach((r, i) =>
      setRef(
        r,
        oldRawRef && (shared.isArray(oldRawRef) ? oldRawRef[i] : oldRawRef),
        parentSuspense,
        vnode,
        isUnmount
      )
    );
    return;
  }
  //1.如果當(dāng)前節(jié)點是一個組件，那么傳遞給ref屬性的將會是expose
  //或者proxy
  //2.如果不是組件那么refValue為當(dāng)前節(jié)點的DOM
  const refValue =
    vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
      ? getExposeProxy(vnode.component) || vnode.component.proxy
      : vnode.el;
  //如果卸載了則value為null
  const value = isUnmount ? null : refValue;
  //i:instance r:ref k:ref_key f:ref_for
  //當(dāng)同時含有ref和for關(guān)鍵詞的時候ref_for為true
  //之前createVNode的時候調(diào)用了normalizeRef將
  //ref設(shè)置為了一個包裝后的對象。
  const { i: owner, r: ref } = rawRef;
  //警告
  if (!owner) {
    warn(
      `Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
        `A vnode with ref must be created inside the render function.`
    );
    return;
  }
  const oldRef = oldRawRef && oldRawRef.r;
  //獲取當(dāng)前實例的refs屬性，初始化refs
  const refs =
    Object.keys(owner.refs).length === 0 ? (owner.refs = {}) : owner.refs;
  //這里是setup函數(shù)調(diào)用的返回值
  const setupState = owner.setupState;
  /*
   ref可以是一個字符串<div ref="a"></div>
   ref可以是一個響應(yīng)式ref對象<div :ref="a"></div>
   ref還可以是一個函數(shù)<div :ref="f"></div>
   setup(){
    retunr {a:ref(null),f(refValue){}}
   }
  */
  //新舊ref不同，清除oldRef
  if (oldRef != null && oldRef !== ref) {
    //如果ref傳遞的字符串類型
    //將當(dāng)前實例的refs屬性對應(yīng)的oldRef設(shè)置為null
    //清除setupState中的oldRef
    if (shared.isString(oldRef)) {
      refs[oldRef] = null;
      if (shared.hasOwn(setupState, oldRef)) {
        setupState[oldRef] = null;
      }
    } 
    //如果是響應(yīng)式的ref,清空value
    else if (reactivity.isRef(oldRef)) {
      oldRef.value = null;
    }
  }
  //如果ref是一個函數(shù)(動態(tài)ref)
  //<div :ref="(el,refs)=>{}"></div>
  //調(diào)用這個函數(shù)傳遞value和refs
  if (shared.isFunction(ref)) {
    //vue的錯誤處理函數(shù),包裹了try catch
    //錯誤監(jiān)聽就是依靠這個函數(shù)，不詳細(xì)展開
    //簡單理解為ref.call(owner,value,refs)
    callWithErrorHandling(ref, owner, 12, [value, refs]);
  } else {
    //判斷ref類型,因為字符串ref和響應(yīng)式ref處理不同
    const _isString = shared.isString(ref);
    const _isRef = reactivity.isRef(ref);
    if (_isString || _isRef) {
      //因為篇幅太長,放到下面講解,此處省略deSet函數(shù)實現(xiàn)
      const doSet = function(){}
      //放入Vue調(diào)度的后置隊列，在DOM更新后再設(shè)置ref
      if (value) {
        doSet.id = -1;
        queuePostRenderEffect(doSet, parentSuspense);
      } else {
        doSet();
      }
    } else {
      warn("Invalid template ref type:", ref, `(${typeof ref})`);
    }
  }
}

const doSet = () => {
  //<div v-for="a in b" :ref="c"></div>
  if (rawRef.f) {
    const existing = _isString ? refs[ref] : ref.value;
    //已經(jīng)卸載了 要移除
    if (isUnmount) {
      shared.isArray(existing) && shared.remove(existing, refValue);
    } else {
      //不是數(shù)組,包裝成數(shù)組,方便后續(xù)push
      if (!shared.isArray(existing)) {
        if (_isString) {
          refs[ref] = [refValue];
          //同時需要修改setupState中的ref
          if (shared.hasOwn(setupState, ref)) {
            setupState[ref] = refs[ref];
          }
        } 
        //如果是響應(yīng)式的ref，修改value
        else {
          ref.value = [refValue];
        }
      }
      //已經(jīng)存在了push
      else if (!existing.includes(refValue)) {
        existing.push(refValue);
      }
    }
  }
  //<div ref="a"></div>
  else if (_isString) {
    refs[ref] = value;
    if (shared.hasOwn(setupState, ref)) {
      setupState[ref] = value;
    }
  }
  //<div :ref="a"></div>
  else if (_isRef) {
    ref.value = value;
    //設(shè)置ref_key為value
    if (rawRef.k) refs[rawRef.k] = value;
  } else {
    warn("Invalid template ref type:", ref, `(${typeof ref})`);
  }
};

//處理Component類型的元素
const processComponent = (
  beforeVNode, //之前的Vnode 第一次掛載為null
  currentVNode, //當(dāng)前的Vnode
  container, //掛載的容器
  anchor,//插入的錨點
  parentComponent, //父組件
  parentSuspense,//父suspense
  isSVG,//是否是SVG
  slotScopeIds,//插槽的作用域ID
  optimized//是否開啟優(yōu)化
) => {
  currentVNode.slotScopeIds = slotScopeIds;
  //不存在beforeVNode掛載
  if (beforeVNode == null) {
      mountComponent(
        currentVNode,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized
      );
  } 
  //更新
  else {
    updateComponent(beforeVNode, currentVNode, optimized);
  }
};