createComponent() — vue Function Reference

Architecture documentation for the createComponent() function in create-component.ts from the vue codebase.

Function typescript CoreRuntime GlobalAPI calls 5 called by 2

Entity Profile

CoreRuntime→ GlobalAPI→ createComponent() — vue Function Reference

Dependency Diagram

graph TD
  97ceaa96_dc73_11db_99c0_3dfa1b31b53f["createComponent()"]
  c2f595b4_afdd_12e0_bb68_ce636e8e6952["renderAsyncComponent()"]
  c2f595b4_afdd_12e0_bb68_ce636e8e6952 -->|calls| 97ceaa96_dc73_11db_99c0_3dfa1b31b53f
  7052be7e_b5c9_7a95_ee8a_73a3c05abcb2["_createElement()"]
  7052be7e_b5c9_7a95_ee8a_73a3c05abcb2 -->|calls| 97ceaa96_dc73_11db_99c0_3dfa1b31b53f
  5a00b29c_e806_9a99_22cb_4a0080592a1a["resolveConstructorOptions()"]
  97ceaa96_dc73_11db_99c0_3dfa1b31b53f -->|calls| 5a00b29c_e806_9a99_22cb_4a0080592a1a
  7c4e5e26_419d_df68_b5f0_b8c2ea0ee7c3["transformModel()"]
  97ceaa96_dc73_11db_99c0_3dfa1b31b53f -->|calls| 7c4e5e26_419d_df68_b5f0_b8c2ea0ee7c3
  d79e8d83_cfdc_ef26_76af_cc7f688eafce["createFunctionalComponent()"]
  97ceaa96_dc73_11db_99c0_3dfa1b31b53f -->|calls| d79e8d83_cfdc_ef26_76af_cc7f688eafce
  c0fead27_e979_7178_460e_4131319cd448["installComponentHooks()"]
  97ceaa96_dc73_11db_99c0_3dfa1b31b53f -->|calls| c0fead27_e979_7178_460e_4131319cd448
  5b67b159_7ee7_ed13_42a0_e4b5c3befd84["getComponentName()"]
  97ceaa96_dc73_11db_99c0_3dfa1b31b53f -->|calls| 5b67b159_7ee7_ed13_42a0_e4b5c3befd84
  style 97ceaa96_dc73_11db_99c0_3dfa1b31b53f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/vdom/create-component.ts lines 101–210

export function createComponent(
  Ctor: typeof Component | Function | ComponentOptions | void,
  data: VNodeData | undefined,
  context: Component,
  children?: Array<VNode>,
  tag?: string
): VNode | Array<VNode> | void {
  if (isUndef(Ctor)) {
    return
  }

  const baseCtor = context.$options._base

  // plain options object: turn it into a constructor
  if (isObject(Ctor)) {
    Ctor = baseCtor.extend(Ctor as typeof Component)
  }

  // if at this stage it's not a constructor or an async component factory,
  // reject.
  if (typeof Ctor !== 'function') {
    if (__DEV__) {
      warn(`Invalid Component definition: ${String(Ctor)}`, context)
    }
    return
  }

  // async component
  let asyncFactory
  // @ts-expect-error
  if (isUndef(Ctor.cid)) {
    asyncFactory = Ctor
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
    if (Ctor === undefined) {
      // return a placeholder node for async component, which is rendered
      // as a comment node but preserves all the raw information for the node.
      // the information will be used for async server-rendering and hydration.
      return createAsyncPlaceholder(asyncFactory, data, context, children, tag)
    }
  }

  data = data || {}

  // resolve constructor options in case global mixins are applied after
  // component constructor creation
  resolveConstructorOptions(Ctor as typeof Component)

  // transform component v-model data into props & events
  if (isDef(data.model)) {
    // @ts-expect-error
    transformModel(Ctor.options, data)
  }

  // extract props
  // @ts-expect-error
  const propsData = extractPropsFromVNodeData(data, Ctor, tag)

  // functional component
  // @ts-expect-error
  if (isTrue(Ctor.options.functional)) {
    return createFunctionalComponent(
      Ctor as typeof Component,
      propsData,
      data,
      context,
      children
    )
  }

  // extract listeners, since these needs to be treated as
  // child component listeners instead of DOM listeners
  const listeners = data.on
  // replace with listeners with .native modifier
  // so it gets processed during parent component patch.
  data.on = data.nativeOn

  // @ts-expect-error
  if (isTrue(Ctor.options.abstract)) {
    // abstract components do not keep anything
    // other than props & listeners & slot

    // work around flow
    const slot = data.slot
    data = {}
    if (slot) {
      data.slot = slot
    }
  }

  // install component management hooks onto the placeholder node
  installComponentHooks(data)

  // return a placeholder vnode
  // @ts-expect-error
  const name = getComponentName(Ctor.options) || tag
  const vnode = new VNode(
    // @ts-expect-error
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data,
    undefined,
    undefined,
    undefined,
    context,
    // @ts-expect-error
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
  )

  return vnode
}