Vue 根组件的挂载有两种方式，一种是在根组件的 options 中配置 el，第二种是在根组件实例化后调用 $mount，两者是冲突的，有了前者，后者便不会生效。当然前者在初始化后调用的也还是 $mount。

let me see see $mount

仅讨论 web 情况

  1. // src\core\instance\init.js =======================================================================================
  2. if (vm.$options.el) {
  3.   vm.$mount(vm.$options.el)
  4. }
  6. // src\platforms\web\runtime\index.js ==============================================================================
  7. Vue.prototype.$mount = function (
  8.   el?: string | Element,
  9.   hydrating?: boolean
  10. ): Component {
  11.   // 入参及环境的校验，获取到 el 对应的 DOM，否则则是 undefined
  12.   el = el && inBrowser ? query(el) : undefined
  13.   return mountComponent(this, el, hydrating)
  14. }
  16. // src\platforms\web\entry-runtime-with-compiler.js ================================================================
  17. // 缓存原先的 $mount 函数，也就是上面运行时的 $mount，在最后还是会调用的
  18. const mount = Vue.prototype.$mount
  20. // 核心目的是得到一个有效的 render 函数
  21. Vue.prototype.$mount = function (
  22.   el?: string | Element,
  23.   hydrating?: boolean
  24. ): Component {
  25.   // 获取对应 DOM
  26.   el = el && query(el)
  28.      // 如果 DOM 是 body 或者 body 则非法，抛出错误
  29.   if (el === document.body || el === document.documentElement) {
  30.     process.env.NODE_ENV !== 'production' && warn(
  31.       `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
  32.     )
  33.     return this
  34.   }
  36.   // 获取初始化之后的 options
  37.   const options = this.$options
  38.   // resolve template/el and convert to render function
  39.   // 如果未编写 render 函数，如果没有，则用各种内容尝试得到一个有效的 template 来使用
  40.   if (!options.render) {
  41.     let template = options.template
  42.        // 如果有 template
  43.     if (template) {
  44.       if (typeof template === 'string') {
  45.         // 如果 template 是 string，且不是已 '#' 号开头的，则直接将其当做 template
  46.         // 如果 template 是 string 且已 '#' 号为开头，则视为 css 选择器，然后找到对应 DOM 的 innerHTML 为 template
  47.         // 如果对应的 innerHTML 为空则抛出非法报错
  48.         if (template.charAt(0) === '#') {
  49.           template = idToTemplate(template)
  50.           if (process.env.NODE_ENV !== 'production' && !template) {
  51.             warn(
  52.               `Template element not found or is empty: ${options.template}`,
  53.               this
  54.             )
  55.           }
  56.         }
  57.       } else if (template.nodeType) {
  58.         // 如果 template 直接是个 DOM 了，则直接取其 innerHTML
  59.         template = template.innerHTML
  60.       } else {
  61.         // 如果以上条件均不成立，就是既没有 render， template 也不是 string 或者 DOM，说明 template 是个非法的内容，则直接报错结束
  62.         if (process.env.NODE_ENV !== 'production') {
  63.           warn('invalid template option:' + template, this)
  64.         }
  65.         return this
  66.       }
  67.     } else if (el) {
  68.       // 如果既没有 render 也没有 template，则将挂载的 DOM 的 outerHTML 为 template
  69.       template = getOuterHTML(el)
  70.     }
  72.     // 如果存在 template，一般经过上面的过滤应该存在了
  73.     if (template) {
  74.       // 性能计算，pass
  75.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  76.         mark('compile')
  77.       }
  79.       // 将 template 转为 render 函数赋值 options，返回
  80.       const { render, staticRenderFns } = compileToFunctions(template, {
  81.         outputSourceRange: process.env.NODE_ENV !== 'production',
  82.         shouldDecodeNewlines,
  83.         shouldDecodeNewlinesForHref,
  84.         delimiters: options.delimiters,
  85.         comments: options.comments
  86.       }, this)
  87.       options.render = render
  88.       options.staticRenderFns = staticRenderFns
  90.       // 性能计算，pass
  91.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  92.         mark('compile end')
  93.         measure(`vue ${this._name} compile`, 'compile', 'compile end')
  94.       }
  95.     }
  96.   }
  97.   // 调用原生的 $mount
  98.   return mount.call(this, el, hydrating)
  99. }

mountComponent

  1. // src\core\instance\lifecycle.js
  2. export function mountComponent (
  3.   vm: Component,
  4.   el: ?Element,
  5.   hydrating?: boolean
  6. ): Component {
  7.   // this.$el 存储的是挂载的 DOM
  8.   vm.$el = el
  10.   // 如果没有 render 函数，
  11.   // 没有 render 函数有两种情况
  12.   // 一是，仅用的 runtime 包，却没有写 render
  13.   // 二是，用了 runtime-with-compiler 包，但是没有有效的 el, template, render 的情况，才会没有 render
  14.   // 下面均是因为上面的两种都属于非法行为而抛出的错误
  15.   if (!vm.$options.render) {
  16.     // 先初始化一个空的 VNode
  17.     vm.$options.render = createEmptyVNode
  19.     if (process.env.NODE_ENV !== 'production') {
  20.       /* istanbul ignore if */
  21.       // 如果写了纯 template 或者有 el，则告诉开发者，当前的开发环境是没有 compile 包的， 用 template 是无效的
  22.       if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
  23.         vm.$options.el || el) {
  24.         warn(
  25.           'You are using the runtime-only build of Vue where the template ' +
  26.           'compiler is not available. Either pre-compile the templates into ' +
  27.           'render functions, or use the compiler-included build.',
  28.           vm
  29.         )
  30.       } else {
  31.         // 如果没有，render，el，template，则抛出错误，提示需要有效的配置
  32.         warn(
  33.           'Failed to mount component: template or render function not defined.',
  34.           vm
  35.         )
  36.       }
  37.     }
  38.   }
  40.   // 触发 beforeMount 生命周期函数
  41.   callHook(vm, 'beforeMount')
  43.   // 开始挂载
  44.   // updateComponent 把渲染函数生成的虚拟DOM渲染成真正的DOM
  45.   let updateComponent
  46.   // if-else 实际没差，前者只是拆分了后者运行，并加了一些性能分析
  47.   if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  48.     updateComponent = () => {
  49.       const name = vm._name
  50.       const id = vm._uid
  51.       const startTag = `vue-perf-start:${id}`
  52.       const endTag = `vue-perf-end:${id}`
  54.       mark(startTag)
  55.       const vnode = vm._render()
  56.       mark(endTag)
  57.       measure(`vue ${name} render`, startTag, endTag)
  59.       mark(startTag)
  60.       vm._update(vnode, hydrating)
  61.       mark(endTag)
  62.       measure(`vue ${name} patch`, startTag, endTag)
  63.     }
  64.   } else {
  65.     updateComponent = () => {
  66.       // 1. vm._render() 将 render 变成虚拟 DOM
  67.       // 2. vm._update() 将 虚拟 DOM 变成真实 DOM
  68.       vm._update(vm._render(), hydrating)
  69.     }
  70.   }
  72.   // we set this to vm._watcher inside the watcher's constructor
  73.   // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  74.   // component's mounted hook), which relies on vm._watcher being already defined
  75.   // 添加实例的观察者
  76.   new Watcher(vm, updateComponent, noop, {
  77.        // before 用于每次数据发生变化时的前置调用，正好与 beforeUpdate 的意图吻合，当然前提是实例已经被挂载，同时未被销毁
  78.     before () {
  79.       if (vm._isMounted && !vm._isDestroyed) {
  80.         callHook(vm, 'beforeUpdate')
  81.       }
  82.     }
  83.   }, true /* isRenderWatcher */)
  84.   hydrating = false
  86.   // manually mounted instance, call mounted on self
  87.   // mounted is called for render-created child components in its inserted hook
  88.   if (vm.$vnode == null) {
  89.     vm._isMounted = true
  90.     callHook(vm, 'mounted')
  91.   }
  92.   return vm
  93. }

compileToFunctions