createFunctionalComponent() — vue Function Reference

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

Function typescript CoreRuntime GlobalAPI calls 4 called by 1

Entity Profile

CoreRuntime→ GlobalAPI→ createFunctionalComponent() — vue Function Reference

Dependency Diagram

graph TD
  d79e8d83_cfdc_ef26_76af_cc7f688eafce["createFunctionalComponent()"]
  97ceaa96_dc73_11db_99c0_3dfa1b31b53f["createComponent()"]
  97ceaa96_dc73_11db_99c0_3dfa1b31b53f -->|calls| d79e8d83_cfdc_ef26_76af_cc7f688eafce
  aa843700_81e5_c5d7_e4a5_ccabe2a7bb24["mergeProps()"]
  d79e8d83_cfdc_ef26_76af_cc7f688eafce -->|calls| aa843700_81e5_c5d7_e4a5_ccabe2a7bb24
  2a3d2c68_f002_d816_7b35_bdbc95f4434c["FunctionalRenderContext()"]
  d79e8d83_cfdc_ef26_76af_cc7f688eafce -->|calls| 2a3d2c68_f002_d816_7b35_bdbc95f4434c
  079fe9e4_9316_0c39_6c2f_32a3b4a3e378["cloneAndMarkFunctionalResult()"]
  d79e8d83_cfdc_ef26_76af_cc7f688eafce -->|calls| 079fe9e4_9316_0c39_6c2f_32a3b4a3e378
  00cce470_87b6_9803_7f03_3dd6786130a1["normalizeChildren()"]
  d79e8d83_cfdc_ef26_76af_cc7f688eafce -->|calls| 00cce470_87b6_9803_7f03_3dd6786130a1
  style d79e8d83_cfdc_ef26_76af_cc7f688eafce fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/vdom/create-functional-component.ts lines 100–151

export function createFunctionalComponent(
  Ctor: typeof Component,
  propsData: Object | undefined,
  data: VNodeData,
  contextVm: Component,
  children?: Array<VNode>
): VNode | Array<VNode> | void {
  const options = Ctor.options
  const props = {}
  const propOptions = options.props
  if (isDef(propOptions)) {
    for (const key in propOptions) {
      props[key] = validateProp(key, propOptions, propsData || emptyObject)
    }
  } else {
    if (isDef(data.attrs)) mergeProps(props, data.attrs)
    if (isDef(data.props)) mergeProps(props, data.props)
  }

  const renderContext = new FunctionalRenderContext(
    data,
    props,
    children,
    contextVm,
    Ctor
  )

  const vnode = options.render.call(null, renderContext._c, renderContext)

  if (vnode instanceof VNode) {
    return cloneAndMarkFunctionalResult(
      vnode,
      data,
      renderContext.parent,
      options,
      renderContext
    )
  } else if (isArray(vnode)) {
    const vnodes = normalizeChildren(vnode) || []
    const res = new Array(vnodes.length)
    for (let i = 0; i < vnodes.length; i++) {
      res[i] = cloneAndMarkFunctionalResult(
        vnodes[i],
        data,
        renderContext.parent,
        options,
        renderContext
      )
    }
    return res
  }
}