After the various initialization phases are complete, vm.$mount is called

The main content of this stage is to take the template content passed in by the user and compile it into a rendering function

The template compilation phase does not exist in all builds of Vue; it only exists in the full version (i.e., vue.js). This stage does not exist in the run-time only version (i.e. Vue.runtime.js), because when using vue-loader or vueify, templates inside the *. Vue file are precompiled into rendering functions at build time, so compilation is not required, thus there is no template compilation stage

$mount

The $mount code for the run-time version only is as follows:

Vue.prototype.$mount = function (el,hydrating) {
  el = el && inBrowser ? query(el) : undefined;
  return mountComponent(this, el, hydrating)
};
Copy the code

The full version of the $mount code is shown below

var mount = Vue.prototype.$mount;
Vue.prototype.$mount = function (el,hydrating) {
  // Omit fetching templates and compiling code
  return mount.call(this, el, hydrating)
}
Copy the code

The full version of the vm.$mount method definition is found in the source code SRC /platforms/web/ entry-runtime-with-Compiler.js

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
) :Component {
  /* calls the query method, that is, document.querySelector if el is a string, or return */ directly
  el = el && query(el)
  /* istanbul ignore if */
  /* Cannot mount directly to body or HTML */
  /* The contents of the Vue template will replace the DOM element corresponding to the EL. Body or HTML will break the document flow */
  if (el === document.body || el === document.documentElement) { process.env.NODE_ENV ! = ='production' && 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 no render is written, get the template and compile into the render function */
  if(! options.render) {let template = options.template
    if (template) {
      /* If template is written, go to */
      /* If there is handwriting, use the following value, if there is no handwriting, use el to get */
      if (typeof template === 'string') {
        /* If the variable template exists, then it is considered the ID selector */ if template is a string and begins with ##
        if (template.charAt(0) = = =The '#') {
          /* Use the idToTemplate function to get the innerHTML of the DOM element of the selector as the template */
          template = idToTemplate(template)
          /* istanbul ignore if */
          if(process.env.NODE_ENV ! = ='production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`.this)}}}else if (template.nodeType) {
        /* Determine if it is a DOM element, and if so, return innerHTML */
        template = template.innerHTML
      } else {
        if(process.env.NODE_ENV ! = ='production') {
          warn('invalid template option:' + template, this)}return this}}else if (el) {
      /* If there is no template options then get the external template */ according to el
      template = getOuterHTML(el)
    }

    if (template) {
      /* Now that the template is ready, compile it into the render function */
      /* Here is the key compiler */
      if(process.env.NODE_ENV ! = ='production' && config.performance && mark) {
        mark('compile')}/* Return render mainly in compileToFunctions and mount to options */
      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV ! = ='production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)

      options.render = render
      options.staticRenderFns = staticRenderFns
        
      if(process.env.NODE_ENV ! = ='production' && config.performance && mark) {
        mark('compile end')
        measure(`vue The ${this._name} compile`.'compile'.'compile end')}}}/* $mount */
  return mount.call(this, el, hydrating)
}
Copy the code