export function createAppAPI<HostElement>(
  render: RootRenderFunction<HostElement>,//由之前的baseCreateRenderer中的render傳入
  hydrate?: RootHydrateFunction
): CreateAppFunction<HostElement> {
return function createApp(rootComponent, rootProps = null) {//rootComponent根組件
    let isMounted = false
    //生成一個具體的對象，提供對應(yīng)的API和相關(guān)屬性
    const app: App = (context.app = {//將以下參數(shù)傳入到context中的app里
      //...省略其他邏輯處理
      //掛載
      mount(
        rootContainer: HostElement,
        isHydrate?: boolean,//是用來判斷是否用于服務(wù)器渲染，這里不講所以省略
        isSVG?: boolean
      ): any {
      //如果處于未掛載完畢狀態(tài)下運行
      if (!isMounted) {
	      //創(chuàng)建一個新的虛擬節(jié)點傳入根組件和根屬性
          const vnode = createVNode(
            rootComponent as ConcreteComponent,
            rootProps
          )
          // 存儲app上下文到根虛擬節(jié)點，這將在初始掛載時設(shè)置在根實例上。
          vnode.appContext = context
          }
          //渲染虛擬節(jié)點，根容器
          render(vnode, rootContainer, isSVG)
          isMounted = true //將狀態(tài)改變成為已掛載
          app._container = rootContainer
          // for devtools and telemetry
          ;(rootContainer as any).__vue_app__ = app
          return getExposeProxy(vnode.component!) || vnode.component!.proxy
      }},
    })
    return app
  }
}

<div class="title" style="font-size:16px;width=100px">這是一個標(biāo)題</div>

const VNode ={
	type:'div',
	props:{
		class:'title',
		style:{
			fontSize:'16px',
			width:'100px'
		}
	},
	children:'這是一個標(biāo)題',
	key:null
}

// package/shared/src/shapeFlags.ts
//這是一個ts的枚舉類，從中也能了解到虛擬節(jié)點的類型
export const enum ShapeFlags {
//DOM元素 HTML
  ELEMENT = 1,
  //函數(shù)式組件
  FUNCTIONAL_COMPONENT = 1 << 1, //2
  //帶狀態(tài)的組件
  STATEFUL_COMPONENT = 1 << 2,//4
  //子節(jié)點是文本
  TEXT_CHILDREN = 1 << 3,//8
  //子節(jié)點是數(shù)組
  ARRAY_CHILDREN = 1 << 4,//16
  //子節(jié)點帶有插槽
  SLOTS_CHILDREN = 1 << 5,//32
  //傳送，將一個組件內(nèi)部的模板‘傳送'到該組件DOM結(jié)構(gòu)外層中去，例如遮罩層的使用
  TELEPORT = 1 << 6,//64
  //懸念，用于等待異步組件時渲染一些額外的內(nèi)容，比如骨架屏，不過目前是實驗性功能
  SUSPENSE = 1 << 7,//128
  //要緩存的組件
  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,//256
  //已緩存的組件
  COMPONENT_KEPT_ALIVE = 1 << 9,//512
  //組件
  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
}//4 | 2

import {h} from 'vue'
h('div', { id: 'foo' })

 const vnode = createVNode(rootComponent as ConcreteComponent,rootProps)

//創(chuàng)建虛擬節(jié)點
export const createVNode = ( _createVNode) as typeof _createVNode
function _createVNode(
//標(biāo)簽類型
  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
  //數(shù)據(jù)和vnode的屬性
  props: (Data & VNodeProps) | null = null,
  //子節(jié)點
  children: unknown = null,
  //patch標(biāo)記
  patchFlag: number = 0,
  //動態(tài)參數(shù)
  dynamicProps: string[] | null = null,
  //是否是block節(jié)點
  isBlockNode = false
): VNode {

  //內(nèi)部邏輯處理
  
  //使用更基層的createBaseVNode對各項參數(shù)進(jìn)行處理
  return createBaseVNode(
    type,
    props,
    children,
    patchFlag,
    dynamicProps,
    shapeFlag,
    isBlockNode,
    true
  )
}

  if (isVNode(type)) {
	//創(chuàng)建虛擬節(jié)點接收到已存在的節(jié)點，這種情況發(fā)生在諸如 <component :is="vnode"/>
    // #2078 確保在克隆過程中合并refs，而不是覆蓋它。
    const cloned = cloneVNode(type, props, true /* mergeRef: true */)
    //如果擁有子節(jié)點，將子節(jié)點規(guī)范化處理
    if (children) {normalizeChildren(cloned, children)}：
	//將拷貝的對象存入currentBlock中
    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
  }

  // 類組件規(guī)范化
  if (isClassComponent(type)) {
    type = type.__vccOpts 
  }
  // 類(class)和風(fēng)格(style) 規(guī)范化.
  if (props) {
    //對于響應(yīng)式或者代理的對象，我們需要克隆來處理，以防止觸發(fā)響應(yīng)式和代理的變動
    props = guardReactiveProps(props)!
    let { class: klass, style } = props
    if (klass && !isString(klass)) {
      props.class = normalizeClass(klass)
    }
    if (isObject(style)) {
     // 響應(yīng)式對象需要克隆后再處理，以免觸發(fā)響應(yīng)式。
      if (isProxy(style) && !isArray(style)) {
        style = extend({}, style)
      }
      props.style = normalizeStyle(style)
    }
  }

  // 將虛擬節(jié)點的類型信息編碼成一個位圖（bitmap）
  // 根據(jù)type類型來確定shapeFlag的屬性值
  const shapeFlag = isString(type)//是否是字符串
    ? ShapeFlags.ELEMENT//傳值1
    : __FEATURE_SUSPENSE__ && isSuspense(type)//是否是懸念類型
    ? ShapeFlags.SUSPENSE//傳值128
    : isTeleport(type)//是否是傳送類型
    ? ShapeFlags.TELEPORT//傳值64
    : isObject(type)//是否是對象類型
    ? ShapeFlags.STATEFUL_COMPONENT//傳值4
    : isFunction(type)//是否是方法類型
    ? ShapeFlags.FUNCTIONAL_COMPONENT//傳值2
    : 0//都不是以上類型 傳值0

function createBaseVNode(
  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,//虛擬節(jié)點類型
  props: (Data & VNodeProps) | null = null,//內(nèi)部的屬性
  children: unknown = null,//子節(jié)點內(nèi)容
  patchFlag = 0,//patch標(biāo)記
  dynamicProps: string[] | null = null,//動態(tài)參數(shù)內(nèi)容
  shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,//節(jié)點類型的信息編碼
  isBlockNode = false,//是否塊節(jié)點
  needFullChildrenNormalization = false
) {
//聲明一個vnode對象，并且將各種屬性賦值，從而完成虛擬節(jié)點的初始化創(chuàng)建
  const vnode = {
    __v_isVNode: true,//內(nèi)部屬性表示為Vnode
    __v_skip: true,//表示跳過響應(yīng)式轉(zhuǎn)換
    type, //虛擬節(jié)點類型
    props,//虛擬節(jié)點內(nèi)的屬性和props
    key: props && normalizeKey(props),//虛擬階段的key用于diff
    ref: props && normalizeRef(props),//引用
    scopeId: currentScopeId,//作用域id
    slotScopeIds: null,//插槽id
    children,//子節(jié)點內(nèi)容，樹形結(jié)構(gòu)
    component: null,//組件
    suspense: null,//傳送組件
    ssContent: null,
    ssFallback: null,
    dirs: null,//目錄
    transition: null,//內(nèi)置組件相關(guān)字段
    el: null,//vnode實際被轉(zhuǎn)換為dom元素的時候產(chǎn)生的元素，宿主
    anchor: null,//錨點
    target: null,//目標(biāo)
    targetAnchor: null,//目標(biāo)錨點
    staticCount: 0,//靜態(tài)節(jié)點數(shù)
    shapeFlag,//shape標(biāo)記
    patchFlag,//patch標(biāo)記
    dynamicProps,//動態(tài)參數(shù)
    dynamicChildren: null,//動態(tài)子節(jié)點
    appContext: null,//app上下文
    ctx: currentRenderingInstance
  } as VNode

  //關(guān)于子節(jié)點和block節(jié)點的標(biāo)準(zhǔn)化和信息編碼處理
  return vnode
}

 const render: RootRenderFunction = (vnode, container, isSVG) => {
    if (vnode == null) {//判斷是否傳入虛擬節(jié)點，如果節(jié)點不存在則運行
      if (container._vnode) {//判斷容器中是否已有節(jié)點
        unmount(container._vnode, null, null, true)//如果已有節(jié)點則卸載當(dāng)前節(jié)點
      }
    } else {
    //如果節(jié)點存在，則調(diào)用patch函數(shù)，從參數(shù)看，會傳入新舊節(jié)點和容器
	      patch(container._vnode || null, vnode, container, null, null, null, isSVG)
    }
    flushPreFlushCbs() //組件更新前的回調(diào)
    flushPostFlushCbs()//組件更新后的回調(diào)
    container._vnode = vnode//將虛擬節(jié)點賦值到容器上
  }

// 注意：此閉包中的函數(shù)應(yīng)使用 'const xxx = （） => {}'樣式，以防止被小寫器內(nèi)聯(lián)。
// patch:進(jìn)行diff算法，crateApp->vnode->element
const patch: PatchFn = (
    n1,//老節(jié)點
    n2,//新節(jié)點
    container,//宿主元素 container
    anchor = null,//錨點，用來標(biāo)識當(dāng)我們對新舊節(jié)點做增刪或移動等操作時，以哪個節(jié)點為參照物
    parentComponent = null,//父組件
    parentSuspense = null,//父懸念
    isSVG = false,
    slotScopeIds = null,//插槽
    optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
  ) => {
    if (n1 === n2) {// 如果新老節(jié)點相同則停止
      return
    }
    // 打補(bǔ)丁且不是相同類型，則卸載舊節(jié)點，錨點后移
    if (n1 && !isSameVNodeType(n1, n2)) {
      anchor = getNextHostNode(n1)
      unmount(n1, parentComponent, parentSuspense, true)
      n1 = null //n1復(fù)位
    }
	//是否動態(tài)節(jié)點優(yōu)化
    if (n2.patchFlag === PatchFlags.BAIL) {
      optimized = false
      n2.dynamicChildren = null
    }
	//結(jié)構(gòu)n2新節(jié)點，獲取新節(jié)點的類型
    const { type, ref, shapeFlag } = n2
    switch (type) {
      case Text: //文本類
	    processText(n1, n2, container, anchor)//文本節(jié)點處理
        break
      case Comment://注釋類
        processCommentNode(n1, n2, container, anchor)//處理注釋節(jié)點
        break
      case Static://靜態(tài)類
        if (n1 == null) {//如果老節(jié)點不存在
          mountStaticNode(n2, container, anchor, isSVG)//掛載靜態(tài)節(jié)點
        }
        break
      case Fragment://片段類
        processFragment(
         //進(jìn)行片段處理
        )
        break
      default:
        if (shapeFlag & ShapeFlags.ELEMENT) {//如果類型編碼是元素
          processElement(
	       n1,
           n2,
           container,
           anchor,
           parentComponent,
           parentSuspense,
           isSVG,
           slotScopeIds,
           optimized
          )
        } else if (shapeFlag & ShapeFlags.COMPONENT) {//如果類型編碼是組件
          processComponent(
           n1,
           n2,
           container,
           anchor,
           parentComponent,
           parentSuspense,
           isSVG,
           slotScopeIds,
           optimized
          )
        } else if (shapeFlag & ShapeFlags.TELEPORT) {
          ;(type as typeof TeleportImpl).process(
          // 如果類型是傳送，進(jìn)行處理
          )
        } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
          ;(type as typeof SuspenseImpl).process(
          //懸念處理
          )
        } 
    }
  
    // 設(shè)置 參考 ref
    if (ref != null && parentComponent) {
      setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
    }
  }

 const processComponent = (
    n1: VNode | null,//老節(jié)點
    n2: VNode,//新節(jié)點
    container: RendererElement,//宿主
    anchor: RendererNode | null,//錨點
    parentComponent: ComponentInternalInstance | null,//父組件
    parentSuspense: SuspenseBoundary | null,//父懸念
    isSVG: boolean,
    slotScopeIds: string[] | null,//插槽
    optimized: boolean
  ) => {
    n2.slotScopeIds = slotScopeIds
    if (n1 == null) {//如果老節(jié)點不存在，初次渲染的時候
	  //省略一部分n2其他情況下的處理
      //掛載組件
        mountComponent(
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized
        )
    } else {
    //更新組件
     updateComponent(n1, n2, optimized)
    }
  }

  const mountComponent: MountComponentFn = (
    initialVNode,//對應(yīng)n2 新的節(jié)點
    container,//對應(yīng)宿主
    anchor,//錨點
    parentComponent,//父組件
    parentSuspense,//父傳送
    isSVG,//是否SVG
    optimized//是否優(yōu)化
  ) => {
    // 2.x編譯器可以在實際安裝前預(yù)先創(chuàng)建組件實例。
    const compatMountInstance =
    //判斷是不是根組件且是組件
      __COMPAT__ && initialVNode.isCompatRoot && initialVNode.component
    const instance: ComponentInternalInstance =
      compatMountInstance ||
      //創(chuàng)建組件實例
      (initialVNode.component = createComponentInstance(
        initialVNode,
        parentComponent,
        parentSuspense
      ))
    // 如果新節(jié)點是緩存組件的話那么將internals賦值給期渲染函數(shù)
    if (isKeepAlive(initialVNode)) {
      ;(instance.ctx as KeepAliveContext).renderer = internals
    }
    // 為了設(shè)置上下文處理props和slot插槽
    if (!(__COMPAT__ && compatMountInstance)) {
	    //設(shè)置組件實例
      setupComponent(instance)
    }
	//setup()是異步的。這個組件在進(jìn)行之前依賴于異步邏輯的解決
    if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
      parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect)
      if (!initialVNode.el) {//如果n2沒有宿主
        const placeholder = (instance.subTree = createVNode(Comment))
        processCommentNode(null, placeholder, container!, anchor)
      }
      return
    }
    //設(shè)置運行渲染副作用函數(shù)
    setupRenderEffect(
      instance,//存儲了新節(jié)點的組件上下文，props插槽等其他實例屬性
      initialVNode,//新節(jié)點n2
      container,//容器
      anchor,//錨點
      parentSuspense,//父懸念
      isSVG,//是否SVG
      optimized//是否優(yōu)化
    )
  }

  const setupRenderEffect: SetupRenderEffectFn = (
    instance,//實例
    initialVNode,//初始化節(jié)點
    container,//容器
    anchor,//錨點
    parentSuspense,//父懸念
    isSVG,//是否是SVG
    optimized//優(yōu)化標(biāo)記
	  ) => {
  //組件更新方法
    const componentUpdateFn = () => {
	   //如果組件處于未掛載的狀態(tài)下
      if (!instance.isMounted) {
        let vnodeHook: VNodeHook | null | undefined
        //解構(gòu)
        const { el, props } = initialVNode
        const { bm, m, parent } = instance
        const isAsyncWrapperVNode = isAsyncWrapper(initialVNode)
        toggleRecurse(instance, false)
        // 掛載前的鉤子
        // 掛載前的節(jié)點
        toggleRecurse(instance, true)
          //這部分是跟服務(wù)器渲染相關(guān)的邏輯處理
          //創(chuàng)建子樹，同時
        const subTree = (instance.subTree = renderComponentRoot(instance))   
	      //遞歸
        patch(
            null,//因為是掛載，所以n1這個老節(jié)點是空的。
            subTree,//子樹賦值到n2這個新節(jié)點
            container,//掛載到container上
            anchor,
            instance,
            parentSuspense,
            isSVG
          )
          //保留渲染生成的子樹DOM節(jié)點
          initialVNode.el = subTree.el
        // 已掛載鉤子
        // 掛在后的節(jié)點
        //激活為了緩存根的鉤子
        // #1742 激活的鉤子必須在第一次渲染后被訪問 因為該鉤子可能會被子類的keep-alive注入。
        instance.isMounted = true
        // #2458: deference mount-only object parameters to prevent memleaks
        // #2458: 遵從只掛載對象的參數(shù)以防止內(nèi)存泄漏
        initialVNode = container = anchor = null as any
      } else {
        // 更新組件
        // 這是由組件自身狀態(tài)的突變觸發(fā)的（next: null）?；蛘吒讣壵{(diào)用processComponent（下一個：VNode）。
      }
    }
    // 創(chuàng)建用于渲染的響應(yīng)式副作用
    const effect = (instance.effect = new ReactiveEffect(
      componentUpdateFn,
      () => queueJob(update),
      instance.scope // 在組件的效果范圍內(nèi)跟蹤它
    ))
    //更新方法
    const update: SchedulerJob = (instance.update = () => effect.run())
    //實例的uid賦值給更新的id
    update.id = instance.uid
    // 允許遞歸
    // #1801, #2043 組件渲染效果應(yīng)允許遞歸更新
    toggleRecurse(instance, true)
    update() 
  }

<template>
	<div class="app">
		<p>title</p>
		<helloWorld>
	</div>
</template>

<template>
	<div class="hello">
		<p>hello world</p>
	</div>
</template>

  const processElement = (
    n1: VNode | null, //老節(jié)點
    n2: VNode,//新節(jié)點
    container: RendererElement,//容器
    anchor: RendererNode | null,//錨點
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: SuspenseBoundary | null,
    isSVG: boolean,
    slotScopeIds: string[] | null,
    optimized: boolean
  ) => {
    isSVG = isSVG || (n2.type as string) === 'svg'
    if (n1 == null) {//如果沒有老節(jié)點，其實就是初次渲染，則運行mountElement
      mountElement(
        n2,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        slotScopeIds,
        optimized
      )
    } else {
	   //如果是更新節(jié)點則運行patchElement
      patchElement(
        n1,
        n2,
        parentComponent,
        parentSuspense,
        isSVG,
        slotScopeIds,
        optimized
      )
    }
  }

  const mountElement = (
    vnode: VNode,
    container: RendererElement,
    anchor: RendererNode | null,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: SuspenseBoundary | null,
    isSVG: boolean,
    slotScopeIds: string[] | null,
    optimized: boolean
  ) => {
    let el: RendererElement
    let vnodeHook: VNodeHook | undefined | null
    const { type, props, shapeFlag, transition, dirs } = vnode
	//創(chuàng)建元素節(jié)點
    el = vnode.el = hostCreateElement(
      vnode.type as string,
      isSVG,
      props && props.is,
      props
    )
    // 首先掛載子類，因為某些props依賴于子類內(nèi)容
    // 已經(jīng)渲染, 例如 `<select value>`
    // 如果標(biāo)記判斷子節(jié)點類型是文本類型
    if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
       // 處理子節(jié)點是純文本的情況
      hostSetElementText(el, vnode.children as string)
      //如果標(biāo)記類型是數(shù)組子類
    } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    //掛載子類，進(jìn)行patch后進(jìn)行掛載
      mountChildren(
        vnode.children as VNodeArrayChildren,
        el,
        null,
        parentComponent,
        parentSuspense,
        isSVG && type !== 'foreignObject',
        slotScopeIds,
        optimized
      )
    }
    if (dirs) {
      invokeDirectiveHook(vnode, null, parentComponent, 'created')
    }
    // 設(shè)置范圍id
    setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent)
    // props相關(guān)的處理，比如 class，style，event，key等屬性
    if (props) { 
      for (const key in props) { 
        if (key !== 'value' && !isReservedProp(key)) {//key值不等于value字符且不是
          hostPatchProp(
            el,
            key,
            null,
            props[key],
            isSVG,
            vnode.children as VNode[],
            parentComponent,
            parentSuspense,
            unmountChildren
          )
        }
      }
      
      if ('value' in props) {
        hostPatchProp(el, 'value', null, props.value)
      }
      if ((vnodeHook = props.onVnodeBeforeMount)) {
        invokeVNodeHook(vnodeHook, parentComponent, vnode)
      }
    }
      Object.defineProperty(el, '__vueParentComponent', {
        value: parentComponent,
        enumerable: false
      }
    }
    if (dirs) {
      invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
    }
    // #1583 對于內(nèi)部懸念+懸念未解決的情況，進(jìn)入鉤子應(yīng)該在懸念解決時調(diào)用。
    // #1689  對于內(nèi)部懸念+懸念解決的情況，只需調(diào)用它
    const needCallTransitionHooks =
      (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&
      transition && !transition.persisted
    if (needCallTransitionHooks) {
      transition!.beforeEnter(el)
    }
	 //把創(chuàng)建的元素el掛載到container容器上。
    hostInsert(el, container, anchor)
    if (
      (vnodeHook = props && props.onVnodeMounted) ||
      needCallTransitionHooks ||
      dirs
    ) {
      queuePostRenderEffect(() => {
        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode)
        needCallTransitionHooks && transition!.enter(el)
        dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
      }, parentSuspense)
    }
  }

const {createElement:hostCreateElement } = options

createElement: (tag, isSVG, is, props): Element => {
    const el = isSVG
      ? doc.createElementNS(svgNS, tag)
      : doc.createElement(tag, is ? { is } : undefined)
    if (tag === 'select' && props && props.multiple != null) {
      ;(el as HTMLSelectElement).setAttribute('multiple', props.multiple)
    }
    return el
  },

const {setElementText: hostSetElementText} = option
setElementText: (el, text) => {
    el.textContent = text
  },

  const mountChildren: MountChildrenFn = (
    children,//子節(jié)點數(shù)組里的內(nèi)容
    container,//容器
    anchor,
    parentComponent,
    parentSuspense,
    isSVG,
    slotScopeIds,
    optimized,//優(yōu)化標(biāo)記
    start = 0
  ) => {
  //遍歷子節(jié)點中的內(nèi)容
    for (let i = start; i < children.length; i++) {
    //根據(jù)優(yōu)化標(biāo)記進(jìn)行判斷進(jìn)行克隆或者節(jié)點初始化處理。
      const child = (children[i] = optimized
        ? cloneIfMounted(children[i] as VNode)
        : normalizeVNode(children[i]))
        //執(zhí)行patch方法，遞歸掛載child
      patch(
        null,//因為是初次掛載所以沒有老的節(jié)點
        child,//虛擬子節(jié)點
        container,//容器
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        slotScopeIds,
        optimized
      )
    }
  }

mountChildren(
	vnode.children as VNodeArrayChildren, //節(jié)點中子節(jié)點的內(nèi)容
	el,//DOM元素
	null,
	parentComponent,
	parentSuspense,
	isSVG && type !== 'foreignObject',
	slotScopeIds,
	optimized
)
      
const mountChildren: MountChildrenFn = (
	children,//子節(jié)點數(shù)組里的內(nèi)容
	container,//容器
	anchor,
	parentComponent,
	parentSuspense,
	isSVG,
	slotScopeIds,
	optimized,//優(yōu)化標(biāo)記
	start = 0
  ) 

const {insert: hostInsert} = option
insert: (child, parent, anchor) => {
    parent.insertBefore(child, anchor || null)
},