createFunctionalComponent() — vue Function Reference

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

Function typescript CoreInstance Lifecycle calls 4 called by 1

Entity Profile

CoreInstance→ Lifecycle→ createFunctionalComponent() — vue Function Reference

Dependency Diagram

graph TD
  c4732d15_fd52_2b9b_6d6d_65e127972dda["createFunctionalComponent()"]
  9f53d048_e9bd_bd7d_3ea7_71affe1529d8["createComponent()"]
  9f53d048_e9bd_bd7d_3ea7_71affe1529d8 -->|calls| c4732d15_fd52_2b9b_6d6d_65e127972dda
  71ca33ff_0c9e_b9d8_f61a_913fbf9ecdf7["mergeProps()"]
  c4732d15_fd52_2b9b_6d6d_65e127972dda -->|calls| 71ca33ff_0c9e_b9d8_f61a_913fbf9ecdf7
  7687c516_230a_8fa2_229a_3ce9660be4d2["FunctionalRenderContext()"]
  c4732d15_fd52_2b9b_6d6d_65e127972dda -->|calls| 7687c516_230a_8fa2_229a_3ce9660be4d2
  b3eb57d2_7ca7_2fcb_4cb5_33fb60eda979["cloneAndMarkFunctionalResult()"]
  c4732d15_fd52_2b9b_6d6d_65e127972dda -->|calls| b3eb57d2_7ca7_2fcb_4cb5_33fb60eda979
  5622921f_54b9_3c35_daaf_e1a5562f01a0["normalizeChildren()"]
  c4732d15_fd52_2b9b_6d6d_65e127972dda -->|calls| 5622921f_54b9_3c35_daaf_e1a5562f01a0
  style c4732d15_fd52_2b9b_6d6d_65e127972dda 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
  }
}