createComponent() — vue Function Reference

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

Function typescript CoreRuntime Instance calls 4 called by 1

Entity Profile

CoreRuntime→ Instance→ createComponent() — vue Function Reference

Dependency Diagram

graph TD
  cd4ab087_1a92_967b_8b0c_652f9562b5f0["createComponent()"]
  a6875054_df8a_0ce4_8a16_374ce422dc53["create-component.ts"]
  cd4ab087_1a92_967b_8b0c_652f9562b5f0 -->|defined in| a6875054_df8a_0ce4_8a16_374ce422dc53
  53f4baed_8a93_cc70_5c6b_47da31c500b5["_createElement()"]
  53f4baed_8a93_cc70_5c6b_47da31c500b5 -->|calls| cd4ab087_1a92_967b_8b0c_652f9562b5f0
  6742d624_32e9_6e5f_4fa4_4938f2e2ef96["transformModel()"]
  cd4ab087_1a92_967b_8b0c_652f9562b5f0 -->|calls| 6742d624_32e9_6e5f_4fa4_4938f2e2ef96
  b0612485_d1af_0118_4a95_5689631b7d51["createFunctionalComponent()"]
  cd4ab087_1a92_967b_8b0c_652f9562b5f0 -->|calls| b0612485_d1af_0118_4a95_5689631b7d51
  d19a39ef_bd3e_4808_da35_290ad3dfb2d0["installComponentHooks()"]
  cd4ab087_1a92_967b_8b0c_652f9562b5f0 -->|calls| d19a39ef_bd3e_4808_da35_290ad3dfb2d0
  16abdeb5_17d6_b741_ca16_dfc41a7d0df5["getComponentName()"]
  cd4ab087_1a92_967b_8b0c_652f9562b5f0 -->|calls| 16abdeb5_17d6_b741_ca16_dfc41a7d0df5
  style cd4ab087_1a92_967b_8b0c_652f9562b5f0 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