Function hydrateElement

packages/runtime-core/src/hydration.ts:368–567

(
    el: Element,
    vnode: VNode,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: SuspenseBoundary | null,
    slotScopeIds: string[] | null,
    optimized: boolean,
  )

  }

  const hydrateElement = (
    el: Element,
    vnode: VNode,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: SuspenseBoundary | null,
    slotScopeIds: string[] | null,
    optimized: boolean,
  ) => {
    optimized = optimized || !!vnode.dynamicChildren
    const {
      type,
      dynamicProps,
      props,
      patchFlag,
      shapeFlag,
      dirs,
      transition,
    } = vnode
    // #4006 for form elements with non-string v-model value bindings
    // e.g. <option :value="obj">, <input type="checkbox" :true-value="1">
    // #7476 <input indeterminate>
    const forcePatch = type === 'input' || type === 'option'
    // #9033 force hydrate dynamic props.
    // Keep separate from forcePatch, which also patches value-like keys.
    const hasDynamicProps = !!dynamicProps
    // skip props & children if this is hoisted static nodes
    // #5405 in dev, always hydrate children for HMR
    if (
      __DEV__ ||
      forcePatch ||
      hasDynamicProps ||
      patchFlag !== PatchFlags.CACHED
    ) {
      if (dirs) {
        invokeDirectiveHook(vnode, null, parentComponent, 'created')
      }

      // handle appear transition
      let needCallTransitionHooks = false
      if (isTemplateNode(el)) {
        needCallTransitionHooks =
          needTransition(
            null, // no need check parentSuspense in hydration
            transition,
          ) &&
          parentComponent &&
          parentComponent.vnode.props &&
          parentComponent.vnode.props.appear

        const content = (el as HTMLTemplateElement).content
          .firstChild as Element & { $cls?: string }

        if (needCallTransitionHooks) {
          const cls = content.getAttribute('class')
          if (cls) content.$cls = cls
          transition!.beforeEnter(content)
        }