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就是組件內容。如果是普通類型就是一個字符串，比方說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的處理，例如用戶通過h函數編寫的代碼
    const cloned = cloneVNode(type, props, true /* mergeRef: true */)
    if (children) {
      normalizeChildren(cloned, children) // 標準化孩子
    }
    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
  }
?
  // 標準化用class寫的組件
  if (isClassComponent(type)) { 
    type = type.__vccOpts
  }
?
  // 標準化異步組件和函數式組件
  if (__COMPAT__) { 
    type = convertLegacyComponent(type, currentRenderingInstance)
  }
?
  // 標準化class props style
  //對于代理過的對象,我們需要克隆來使用他們
  //因為直接修改會導致觸發(fā)響應式
  if (props) {
    props = guardReactiveProps(props)! // 防止props是響應式的
    let { class: klass, style } = props
    if (klass && !isString(klass)) {
      props.class = normalizeClass(klass) // 標準話class
    }
    if (isObject(style)) { // 標準化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) // 根據type不同生成不同的shapeFlag，方便后面對不同的類型做處理
    ? ShapeFlags.ELEMENT
    : __FEATURE_SUSPENSE__ && isSuspense(type)
    ? ShapeFlags.SUSPENSE
    : isTeleport(type)
    ? ShapeFlags.TELEPORT
    : isObject(type)
    ? ShapeFlags.STATEFUL_COMPONENT // 有狀態(tài)組件
    : isFunction(type)
    ? ShapeFlags.FUNCTIONAL_COMPONENT // 函數組件
    : 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, // 動態(tài)屬性
  shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,
  isBlockNode = false,
  needFullChildrenNormalization = false
) {
  const vnode = { // 創(chuàng)建一個vnode
    __v_isVNode: true, // 是不是vnode
    __v_skip: true,
    type, // type對于組件來說就是組件內容
    props,
    key: props && normalizeKey(props), // 標準化key
    ref: props && normalizeRef(props), // 標準化 props
    scopeId: currentScopeId,
    slotScopeIds: null,
    children, // 孩子的vnode
    component: null, // 如果是一個組件的話就會有組件的實例，組件實例的subtree上面掛載了這個組件下面所有的vnode
    suspense: null,
    ssContent: null,
    ssFallback: null,
    dirs: null, // 指令相關
    transition: null, // transition相關
    el: null, // 真實dom
    anchor: null, // 插入的位置
    target: null,
    targetAnchor: null,
    staticCount: 0,
    shapeFlag, // 組件類型
    patchFlag, // 靶向更新標記
    dynamicProps, // 動態(tài)props
    dynamicChildren: null, // 動態(tài)孩子
    appContext: null, // 應用根context
    ctx: currentRenderingInstance
  } as VNode
?
  if (needFullChildrenNormalization) {
    normalizeChildren(vnode, children) // 標準化子組件。例如插槽啥的。添加children并且更改vnode的shapFlag
    if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
      ;(type as typeof SuspenseImpl).normalize(vnode) // 標準化異步組件
    }
  } else if (children) {
    vnode.shapeFlag |= isString(children) // 判斷ShapeFlags，可以是多個類型的組合
      ? ShapeFlags.TEXT_CHILDREN
      : ShapeFlags.ARRAY_CHILDREN
  }
?
  // 編譯優(yōu)化相關?，F在不必了解
  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. // 補丁標志的存在表明此節(jié)點需要在更新時進行補丁。
    // component nodes also should always be patched, because even if the // 組件節(jié)點應該是中有patchFlag
    // component doesn't need to update, it needs to persist the instance on to // 組件不需要更新，它需要將實例持久化到
    // the next vnode so that it can be properly unmounted later. 下一個vnode，以便以后可以正確地卸載它。
    (vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) && // 有patchFlag說明是動態(tài)節(jié)點
    vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
  ) {
    currentBlock.push(vnode) // 放入到父親的區(qū)塊中去，說明現在的是一個動態(tài)節(jié)點
  }
?
  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() { // 需要確保返回的是一個函數而不是一個值，這個函數最后會被用作渲染函數render，這個render在后面會被重復調用的
    // 使用數組返回多個根節(jié)點
    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) { // 只有兩個參數,要么是只有孩子，要么是只有props
    if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
      if (isVNode(propsOrChildren)) { // 如果第二個參數是一個vnode說明是子節(jié)點
        return createVNode(type, null, [propsOrChildren])
      }
      return createVNode(type, propsOrChildren) // 沒有孩子節(jié)點的情況
    } else {
      // 如果propsOrChildren是數組那么一定是孩子節(jié)點
      return createVNode(type, null, propsOrChildren)
    }
  } else { // prop和孩子節(jié)點都有的情況
    if (l > 3) { // 第三個參數之后都是孩子
      children = Array.prototype.slice.call(arguments, 2)
    } else if (l === 3 && isVNode(children)) {
      children = [children]
    }
    return createVNode(type, propsOrChildren, children)
  }
}