vue Architecture Docs
Home / File/ create-component.ts — vue Source File

create-component.ts — vue Source File

Architecture documentation for create-component.ts, a typescript file in the vue codebase. 17 imports, 4 dependents.

File typescript CoreRuntime Instance 17 imports 4 dependents 10 functions

Entity Profile

Dependency Diagram

graph LR
  a6875054_df8a_0ce4_8a16_374ce422dc53["create-component.ts"]
  a13b4a2c_7af7_bcfd_03a9_13286f908ca0["vnode.ts"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> a13b4a2c_7af7_bcfd_03a9_13286f908ca0
  6a05321e_c7cd_43ad_21be_69c7e5fd4488["VNode"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> 6a05321e_c7cd_43ad_21be_69c7e5fd4488
  dfa00dc1_b5e1_fc4b_364c_221e22660e03["create-functional-component.ts"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> dfa00dc1_b5e1_fc4b_364c_221e22660e03
  b0612485_d1af_0118_4a95_5689631b7d51["createFunctionalComponent"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> b0612485_d1af_0118_4a95_5689631b7d51
  2a298df2_21b8_7e5a_c372_51ba50c9d92d["index.ts"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> 2a298df2_21b8_7e5a_c372_51ba50c9d92d
  ff42c1fb_00b4_0627_8802_37fe0cfb2e4d["index.ts"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> ff42c1fb_00b4_0627_8802_37fe0cfb2e4d
  f3560440_54c1_5663_36f8_c7de54d7310b["lifecycle.ts"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> f3560440_54c1_5663_36f8_c7de54d7310b
  f8064a1e_1b6a_274a_f334_111faf594604["callHook"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> f8064a1e_1b6a_274a_f334_111faf594604
  f10291d3_36ff_88b8_ea51_0c73b3e62367["updateChildComponent"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> f10291d3_36ff_88b8_ea51_0c73b3e62367
  c839785a_cc49_21a8_563d_d8789c68747b["activateChildComponent"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> c839785a_cc49_21a8_563d_d8789c68747b
  043a558f_df1f_5f57_8b30_ee24fc5b407f["deactivateChildComponent"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> 043a558f_df1f_5f57_8b30_ee24fc5b407f
  8a5fb776_a8f4_ce8a_8549_67af07f2e1e9["util"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> 8a5fb776_a8f4_ce8a_8549_67af07f2e1e9
  73074226_36b7_6537_2358_cb82e6856f8c["init"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> 73074226_36b7_6537_2358_cb82e6856f8c
  768d7987_0d02_bd3d_e5be_d81c1e77a420["scheduler"]
  a6875054_df8a_0ce4_8a16_374ce422dc53 --> 768d7987_0d02_bd3d_e5be_d81c1e77a420
  style a6875054_df8a_0ce4_8a16_374ce422dc53 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import VNode from './vnode'
import { isArray } from 'core/util'
import { resolveConstructorOptions } from 'core/instance/init'
import { queueActivatedComponent } from 'core/observer/scheduler'
import { createFunctionalComponent } from './create-functional-component'

import { warn, isDef, isUndef, isTrue, isObject } from '../util/index'

import {
  resolveAsyncComponent,
  createAsyncPlaceholder,
  extractPropsFromVNodeData
} from './helpers/index'

import {
  callHook,
  activeInstance,
  updateChildComponent,
  activateChildComponent,
  deactivateChildComponent
} from '../instance/lifecycle'

import type {
  MountedComponentVNode,
  VNodeData,
  VNodeWithData
} from 'types/vnode'
import type { Component } from 'types/component'
import type { ComponentOptions, InternalComponentOptions } from 'types/options'

export function getComponentName(options: ComponentOptions) {
  return options.name || options.__name || options._componentTag
}

// inline hooks to be invoked on component VNodes during patch
const componentVNodeHooks = {
  init(vnode: VNodeWithData, hydrating: boolean): boolean | void {
    if (
      vnode.componentInstance &&
      !vnode.componentInstance._isDestroyed &&
      vnode.data.keepAlive
    ) {
      // kept-alive components, treat as a patch
      const mountedNode: any = vnode // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode)
    } else {
      const child = (vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance
      ))
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    }
  },

  prepatch(oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    const options = vnode.componentOptions
    const child = (vnode.componentInstance = oldVnode.componentInstance)
    updateChildComponent(
      child,
      options.propsData, // updated props
// ... (216 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does create-component.ts do?
create-component.ts is a source file in the vue codebase, written in typescript. It belongs to the CoreRuntime domain, Instance subdomain.
What functions are defined in create-component.ts?
create-component.ts defines 10 function(s): componentVNodeHooks.destroy, componentVNodeHooks.init, componentVNodeHooks.insert, componentVNodeHooks.prepatch, createComponent, createComponentInstanceForVnode, getComponentName, installComponentHooks, mergeHook, transformModel.
What does create-component.ts depend on?
create-component.ts imports 17 module(s): VNode, activateChildComponent, callHook, component, create-functional-component.ts, createFunctionalComponent, deactivateChildComponent, index.ts, and 9 more.
What files import create-component.ts?
create-component.ts is imported by 4 file(s): create-element.ts, debug.ts, extend.ts, keep-alive.ts.
Where is create-component.ts in the architecture?
create-component.ts is located at src/core/vdom/create-component.ts (domain: CoreRuntime, subdomain: Instance, directory: src/core/vdom).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free