export interface VNode<
  HostNode = RendererNode,
  HostElement = RendererElement,
  ExtraProps = { [key: string]: any }
> {
  __v_isVNode: true
  [ReactiveFlags.SKIP]: true
  type: VNodeTypes
  props: (VNodeProps & ExtraProps) | null
  key: string | number | symbol | null
  ref: VNodeNormalizedRef | null
  scopeId: string | null
  slotScopeIds: string[] | null
  children: VNodeNormalizedChildren
  component: ComponentInternalInstance | null
  dirs: DirectiveBinding[] | null
  transition: TransitionHooks<HostElement> | null
  // DOM
  el: HostNode | null
  anchor: HostNode | null // fragment anchor
  target: HostElement | null // teleport target
  targetAnchor: HostNode | null // teleport target anchor
  staticCount: number
  suspense: SuspenseBoundary | null
  ssContent: VNode | null
  ssFallback: VNode | null
  shapeFlag: number
  patchFlag: number
  dynamicProps: string[] | null
  dynamicChildren: VNode[] | null
  appContext: AppContext | null
  ctx: ComponentInternalInstance | null
  memo?: any[]
  isCompatRoot?: true
  ce?: (instance: ComponentInternalInstance) => void
}

const vnode = {
  type: 'div',
  props: {
    id: 'hello'
  },
  children: [
    /* 更多 vnode */
  ]
}

<template>
  <hello-world :msg="msg" :info="info"></hello-world>
  <div>
    <button @click="addAge">Add age</button>
    <button @click="toggleMsg">Toggle Msg</button>
  </div>
</template>

import { resolveComponent as _resolveComponent, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
?
const _hoisted_1 = ["onClick"]
const _hoisted_2 = ["onClick"]
?
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hello_world = _resolveComponent("hello-world")
?
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createVNode(_component_hello_world, {
      msg: _ctx.msg,
      info: _ctx.info
    }, null, 8 /* PROPS */, ["msg", "info"]),
    _createElementVNode("div", null, [
      _createElementVNode("button", { onClick: _ctx.addAge }, "Add age", 8 /* PROPS */, _hoisted_1),
      _createElementVNode("button", { onClick: _ctx.toggleMsg }, "Toggle Msg", 8 /* PROPS */, _hoisted_2)
    ])
  ], 64 /* STABLE_FRAGMENT */))
}

function _createVNode(
  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT, // 如果是組件，type就是組件內(nèi)容。如果是普通類型就是一個(gè)字符串，比方說(shuō)div, HelloWorld之類的
  props: (Data & VNodeProps) | null = null,
  children: unknown = null, //子組件
  patchFlag: number = 0,
  dynamicProps: string[] | null = null,
  isBlockNode = false
): VNode {
  if (!type || type === NULL_DYNAMIC_COMPONENT) {
    type = Comment
  }
?
  if (isVNode(type)) { // 是Vnode的處理，例如用戶通過(guò)h函數(shù)編寫(xiě)的代碼
    const cloned = cloneVNode(type, props, true /* mergeRef: true */)
    if (children) {
      normalizeChildren(cloned, children) // 標(biāo)準(zhǔn)化孩子
    }
    if (isBlockTreeEnabled > 0 && !isBlockNode && currentBlock) {
      if (cloned.shapeFlag & ShapeFlags.COMPONENT) {
        currentBlock[currentBlock.indexOf(type)] = cloned
      } else {
        currentBlock.push(cloned)
      }
    }
    cloned.patchFlag |= PatchFlags.BAIL
    return cloned
  }
?
  // 標(biāo)準(zhǔn)化用class寫(xiě)的組件
  if (isClassComponent(type)) { 
    type = type.__vccOpts
  }
?
  // 標(biāo)準(zhǔn)化異步組件和函數(shù)式組件
  if (__COMPAT__) { 
    type = convertLegacyComponent(type, currentRenderingInstance)
  }
?
  // 標(biāo)準(zhǔn)化class props style
  //對(duì)于代理過(guò)的對(duì)象,我們需要克隆來(lái)使用他們
  //因?yàn)橹苯有薷臅?huì)導(dǎo)致觸發(fā)響應(yīng)式
  if (props) {
    props = guardReactiveProps(props)! // 防止props是響應(yīng)式的
    let { class: klass, style } = props
    if (klass && !isString(klass)) {
      props.class = normalizeClass(klass) // 標(biāo)準(zhǔn)話class
    }
    if (isObject(style)) { // 標(biāo)準(zhǔn)化style
      if (isProxy(style) && !isArray(style)) {
        style = extend({}, style)
      }
      props.style = normalizeStyle(style)
    }
  }
?
  // encode the vnode type information into a bitmap
  const shapeFlag = isString(type) // 根據(jù)type不同生成不同的shapeFlag，方便后面對(duì)不同的類型做處理
    ? ShapeFlags.ELEMENT
    : __FEATURE_SUSPENSE__ && isSuspense(type)
    ? ShapeFlags.SUSPENSE
    : isTeleport(type)
    ? ShapeFlags.TELEPORT
    : isObject(type)
    ? ShapeFlags.STATEFUL_COMPONENT // 有狀態(tài)組件
    : isFunction(type)
    ? ShapeFlags.FUNCTIONAL_COMPONENT // 函數(shù)組件
    : 0
?
  return createBaseVNode(
    type,
    props,
    children,
    patchFlag, // 更新類型
    dynamicProps,
    shapeFlag,
    isBlockNode,
    true
  )
}

function createBaseVNode(
  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
  props: (Data & VNodeProps) | null = null,
  children: unknown = null,
  patchFlag = 0,
  dynamicProps: string[] | null = null, // 動(dòng)態(tài)屬性
  shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,
  isBlockNode = false,
  needFullChildrenNormalization = false
) {
  const vnode = { // 創(chuàng)建一個(gè)vnode
    __v_isVNode: true, // 是不是vnode
    __v_skip: true,
    type, // type對(duì)于組件來(lái)說(shuō)就是組件內(nèi)容
    props,
    key: props && normalizeKey(props), // 標(biāo)準(zhǔn)化key
    ref: props && normalizeRef(props), // 標(biāo)準(zhǔn)化 props
    scopeId: currentScopeId,
    slotScopeIds: null,
    children, // 孩子的vnode
    component: null, // 如果是一個(gè)組件的話就會(huì)有組件的實(shí)例，組件實(shí)例的subtree上面掛載了這個(gè)組件下面所有的vnode
    suspense: null,
    ssContent: null,
    ssFallback: null,
    dirs: null, // 指令相關(guān)
    transition: null, // transition相關(guān)
    el: null, // 真實(shí)dom
    anchor: null, // 插入的位置
    target: null,
    targetAnchor: null,
    staticCount: 0,
    shapeFlag, // 組件類型
    patchFlag, // 靶向更新標(biāo)記
    dynamicProps, // 動(dòng)態(tài)props
    dynamicChildren: null, // 動(dòng)態(tài)孩子
    appContext: null, // 應(yīng)用根context
    ctx: currentRenderingInstance
  } as VNode
?
  if (needFullChildrenNormalization) {
    normalizeChildren(vnode, children) // 標(biāo)準(zhǔn)化子組件。例如插槽啥的。添加children并且更改vnode的shapFlag
    if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
      ;(type as typeof SuspenseImpl).normalize(vnode) // 標(biāo)準(zhǔn)化異步組件
    }
  } else if (children) {
    vnode.shapeFlag |= isString(children) // 判斷ShapeFlags，可以是多個(gè)類型的組合
      ? ShapeFlags.TEXT_CHILDREN
      : ShapeFlags.ARRAY_CHILDREN
  }
?
  // 編譯優(yōu)化相關(guān)?，F(xiàn)在不必了解
  if (
    isBlockTreeEnabled > 0 &&
    // avoid a block node from tracking itself
    !isBlockNode &&
    // has current parent block
    currentBlock &&
    // presence of a patch flag indicates this node needs patching on updates. // 補(bǔ)丁標(biāo)志的存在表明此節(jié)點(diǎn)需要在更新時(shí)進(jìn)行補(bǔ)丁。
    // component nodes also should always be patched, because even if the // 組件節(jié)點(diǎn)應(yīng)該是中有patchFlag
    // component doesn't need to update, it needs to persist the instance on to // 組件不需要更新，它需要將實(shí)例持久化到
    // the next vnode so that it can be properly unmounted later. 下一個(gè)vnode，以便以后可以正確地卸載它。
    (vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) && // 有patchFlag說(shuō)明是動(dòng)態(tài)節(jié)點(diǎn)
    vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
  ) {
    currentBlock.push(vnode) // 放入到父親的區(qū)塊中去，說(shuō)明現(xiàn)在的是一個(gè)動(dòng)態(tài)節(jié)點(diǎn)
  }
?
  if (__COMPAT__) {
    convertLegacyVModelProps(vnode)
    defineLegacyVNodeProperties(vnode)
  }
?
  return vnode
}

export { createBaseVNode as createElementVNode }

import { h } from 'vue'
?
const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

import { h } from 'vue'

export default {
  setup() { // 需要確保返回的是一個(gè)函數(shù)而不是一個(gè)值，這個(gè)函數(shù)最后會(huì)被用作渲染函數(shù)render，這個(gè)render在后面會(huì)被重復(fù)調(diào)用的
    // 使用數(shù)組返回多個(gè)根節(jié)點(diǎn)
    return () => [
      h('div'),
      h('div'),
      h('div')
    ]
  }
}

<template>
	<div></div>
  <div></div>
  <div></div>
</template>

export default {
  setup() {}
}

export function h(type: any, propsOrChildren?: any, children?: any): VNode {
  const l = arguments.length
  if (l === 2) { // 只有兩個(gè)參數(shù),要么是只有孩子，要么是只有props
    if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
      if (isVNode(propsOrChildren)) { // 如果第二個(gè)參數(shù)是一個(gè)vnode說(shuō)明是子節(jié)點(diǎn)
        return createVNode(type, null, [propsOrChildren])
      }
      return createVNode(type, propsOrChildren) // 沒(méi)有孩子節(jié)點(diǎn)的情況
    } else {
      // 如果propsOrChildren是數(shù)組那么一定是孩子節(jié)點(diǎn)
      return createVNode(type, null, propsOrChildren)
    }
  } else { // prop和孩子節(jié)點(diǎn)都有的情況
    if (l > 3) { // 第三個(gè)參數(shù)之后都是孩子
      children = Array.prototype.slice.call(arguments, 2)
    } else if (l === 3 && isVNode(children)) {
      children = [children]
    }
    return createVNode(type, propsOrChildren, children)
  }
}