mountComponent() — vue Function Reference

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

Function typescript VueCore Instance calls 4

Entity Profile

VueCore→ Instance→ mountComponent() — vue Function Reference

Dependency Diagram

graph TD
  4608cf7a_77c1_65d7_34bb_dbc4ea050d61["mountComponent()"]
  d937f76e_061f_a631_9587_336503c9a15c["lifecycle.ts"]
  4608cf7a_77c1_65d7_34bb_dbc4ea050d61 -->|defined in| d937f76e_061f_a631_9587_336503c9a15c
  77ac8989_609a_4755_79eb_0403c1cc7788["callHook()"]
  4608cf7a_77c1_65d7_34bb_dbc4ea050d61 -->|calls| 77ac8989_609a_4755_79eb_0403c1cc7788
  52e70123_85d8_4258_eaf3_a7a0731a5968["mark()"]
  4608cf7a_77c1_65d7_34bb_dbc4ea050d61 -->|calls| 52e70123_85d8_4258_eaf3_a7a0731a5968
  51edb677_f952_7062_365b_064cd93a29f4["measure()"]
  4608cf7a_77c1_65d7_34bb_dbc4ea050d61 -->|calls| 51edb677_f952_7062_365b_064cd93a29f4
  71876f35_b702_de2d_a393_99f72b820099["run()"]
  4608cf7a_77c1_65d7_34bb_dbc4ea050d61 -->|calls| 71876f35_b702_de2d_a393_99f72b820099
  style 4608cf7a_77c1_65d7_34bb_dbc4ea050d61 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