mountComponent() — vue Function Reference

Architecture documentation for the mountComponent() function in lifecycle.ts from the vue codebase.

Function typescript CoreRuntime Instance calls 4

Entity Profile

CoreRuntime→ Instance→ mountComponent() — vue Function Reference

Dependency Diagram

graph TD
  635aa950_844d_5a47_5cc5_4e33768708f9["mountComponent()"]
  f3560440_54c1_5663_36f8_c7de54d7310b["lifecycle.ts"]
  635aa950_844d_5a47_5cc5_4e33768708f9 -->|defined in| f3560440_54c1_5663_36f8_c7de54d7310b
  f8064a1e_1b6a_274a_f334_111faf594604["callHook()"]
  635aa950_844d_5a47_5cc5_4e33768708f9 -->|calls| f8064a1e_1b6a_274a_f334_111faf594604
  c66f2b7c_7247_ba1e_a44e_c9fbf576a0f8["mark()"]
  635aa950_844d_5a47_5cc5_4e33768708f9 -->|calls| c66f2b7c_7247_ba1e_a44e_c9fbf576a0f8
  3dba2c58_eaa7_9043_7b9a_5564624e9333["measure()"]
  635aa950_844d_5a47_5cc5_4e33768708f9 -->|calls| 3dba2c58_eaa7_9043_7b9a_5564624e9333
  a4fba0c0_c91e_f56f_3c69_5a18514bb8e1["run()"]
  635aa950_844d_5a47_5cc5_4e33768708f9 -->|calls| a4fba0c0_c91e_f56f_3c69_5a18514bb8e1
  style 635aa950_844d_5a47_5cc5_4e33768708f9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/instance/lifecycle.ts lines 147–244

export function mountComponent(
  vm: Component,
  el: Element | null | undefined,
  hydrating?: boolean
): Component {
  vm.$el = el
  if (!vm.$options.render) {
    // @ts-expect-error invalid type
    vm.$options.render = createEmptyVNode
    if (__DEV__) {
      /* istanbul ignore if */
      if (
        (vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        vm.$options.el ||
        el
      ) {
        warn(
          'You are using the runtime-only build of Vue where the template ' +
            'compiler is not available. Either pre-compile the templates into ' +
            'render functions, or use the compiler-included build.',
          vm
        )
      } else {
        warn(
          'Failed to mount component: template or render function not defined.',
          vm
        )
      }
    }
  }
  callHook(vm, 'beforeMount')

  let updateComponent
  /* istanbul ignore if */
  if (__DEV__ && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  const watcherOptions: WatcherOptions = {
    before() {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }

  if (__DEV__) {
    watcherOptions.onTrack = e => callHook(vm, 'renderTracked', [e])
    watcherOptions.onTrigger = e => callHook(vm, 'renderTriggered', [e])
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(
    vm,
    updateComponent,
    noop,
    watcherOptions,
    true /* isRenderWatcher */
  )
  hydrating = false