createComponent() — vue Function Reference

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

Function typescript VueCore Instance calls 4 called by 1

Entity Profile

VueCore→ Instance→ createComponent() — vue Function Reference

Dependency Diagram

graph TD
  18846da1_d4a3_5b6b_af05_795ee5beebed["createComponent()"]
  82e2e746_8f28_fbf0_8cf7_69eca6423e4a["create-component.ts"]
  18846da1_d4a3_5b6b_af05_795ee5beebed -->|defined in| 82e2e746_8f28_fbf0_8cf7_69eca6423e4a
  97662195_00aa_821a_3a03_9901c7f344e9["_createElement()"]
  97662195_00aa_821a_3a03_9901c7f344e9 -->|calls| 18846da1_d4a3_5b6b_af05_795ee5beebed
  ca989102_6ee8_9711_d16c_e6e7a259d30f["transformModel()"]
  18846da1_d4a3_5b6b_af05_795ee5beebed -->|calls| ca989102_6ee8_9711_d16c_e6e7a259d30f
  8e06d47c_8725_0580_db2e_8b6ce77e9953["createFunctionalComponent()"]
  18846da1_d4a3_5b6b_af05_795ee5beebed -->|calls| 8e06d47c_8725_0580_db2e_8b6ce77e9953
  560c6919_dc9c_64eb_eefd_3c8ace5af79c["installComponentHooks()"]
  18846da1_d4a3_5b6b_af05_795ee5beebed -->|calls| 560c6919_dc9c_64eb_eefd_3c8ace5af79c
  07237020_2f32_55be_02ad_e77197985632["getComponentName()"]
  18846da1_d4a3_5b6b_af05_795ee5beebed -->|calls| 07237020_2f32_55be_02ad_e77197985632
  style 18846da1_d4a3_5b6b_af05_795ee5beebed 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