Home / Function/ $mount() — vue Function Reference

$mount() — vue Function Reference

Architecture documentation for the $mount() function in runtime-with-compiler.ts from the vue codebase.

Function typescript WebPlatform WebRuntime calls 5

Entity Profile

Dependency Diagram

graph TD
  cc8f669d_3f4a_79f9_7f19_22ea440b9b3f["$mount()"]
  d28b05d8_60c2_84ac_d7a7_a4c982ef8fd1["query()"]
  cc8f669d_3f4a_79f9_7f19_22ea440b9b3f -->|calls| d28b05d8_60c2_84ac_d7a7_a4c982ef8fd1
  56234f64_f5b5_bb1a_3541_1720a75bac80["idToTemplate()"]
  cc8f669d_3f4a_79f9_7f19_22ea440b9b3f -->|calls| 56234f64_f5b5_bb1a_3541_1720a75bac80
  af06f072_6507_4d93_8f7d_dee3841478ac["getOuterHTML()"]
  cc8f669d_3f4a_79f9_7f19_22ea440b9b3f -->|calls| af06f072_6507_4d93_8f7d_dee3841478ac
  e0077606_be30_481a_4b40_50a71251ed9f["mark()"]
  cc8f669d_3f4a_79f9_7f19_22ea440b9b3f -->|calls| e0077606_be30_481a_4b40_50a71251ed9f
  b699afe1_c2e5_457d_134c_af2c17664385["measure()"]
  cc8f669d_3f4a_79f9_7f19_22ea440b9b3f -->|calls| b699afe1_c2e5_457d_134c_af2c17664385
  style cc8f669d_3f4a_79f9_7f19_22ea440b9b3f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime-with-compiler.ts lines 21–92

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    __DEV__ &&
      warn(
        `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
      )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (__DEV__ && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (__DEV__) {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      // @ts-expect-error
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (__DEV__ && config.performance && mark) {
        mark('compile')
      }

      const { render, staticRenderFns } = compileToFunctions(
        template,
        {
          outputSourceRange: __DEV__,
          shouldDecodeNewlines,
          shouldDecodeNewlinesForHref,
          delimiters: options.delimiters,
          comments: options.comments
        },
        this
      )
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (__DEV__ && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does $mount() do?
$mount() is a function in the vue codebase.
What does $mount() call?
$mount() calls 5 function(s): getOuterHTML, idToTemplate, mark, measure, query.

Analyze Your Own Codebase

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

Try Supermodel Free