mountComponent() — vue Function Reference

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

Function typescript CoreRuntime InstanceState calls 4 called by 1

Entity Profile

CoreRuntime→ InstanceState→ mountComponent() — vue Function Reference

Dependency Diagram

graph TD
  58398ca0_ee87_00ce_db95_d8e11ce46b1e["mountComponent()"]
  804497f5_ba68_ea64_1312_be41ae032038["$mount()"]
  804497f5_ba68_ea64_1312_be41ae032038 -->|calls| 58398ca0_ee87_00ce_db95_d8e11ce46b1e
  a7fb5d54_f5e0_5d73_5f6a_96e6c47acbeb["callHook()"]
  58398ca0_ee87_00ce_db95_d8e11ce46b1e -->|calls| a7fb5d54_f5e0_5d73_5f6a_96e6c47acbeb
  1350e21f_1b74_6608_e1b6_e32c635ba3e3["mark()"]
  58398ca0_ee87_00ce_db95_d8e11ce46b1e -->|calls| 1350e21f_1b74_6608_e1b6_e32c635ba3e3
  baee4b33_abd2_45c7_4cbc_98ddfcca1ce4["measure()"]
  58398ca0_ee87_00ce_db95_d8e11ce46b1e -->|calls| baee4b33_abd2_45c7_4cbc_98ddfcca1ce4
  eb15026c_5696_e629_0e8f_4bc0a98f7d98["run()"]
  58398ca0_ee87_00ce_db95_d8e11ce46b1e -->|calls| eb15026c_5696_e629_0e8f_4bc0a98f7d98
  style 58398ca0_ee87_00ce_db95_d8e11ce46b1e 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

  // flush buffer for flush: "pre" watchers queued in setup()
  const preWatchers = vm._preWatchers
  if (preWatchers) {
    for (let i = 0; i < preWatchers.length; i++) {
      preWatchers[i].run()
    }
  }

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}