Vue中是通过$mount实例方法去挂载vm的，$mount方法在多个文件中都有定义

  • src/platform/web/entry-runtime-with-compiler.js
  • src/platform/web/runtime/index.js
  • src/platform/weex/runtime/index.js

$mount方法的实现和平台、构建方式都相关的
以带compiler版本的$mount实现为例，因为抛开webpack的vue-loader，在纯前端浏览器环境分析Vue的工作原理有助于对原理的深入理解

实现

src/platform/web/entry-runtime-with-compiler.js 文件中定义

  1. const mount = Vue.prototype.$mount // 缓存原型上的$mount方法
  2. // 重新定义$mount方法
  3. Vue.prototype.$mount = function (
  4.   el?: string | Element,
  5.   hydrating?: boolean
  6. ): Component {
  7.   el = el && query(el)
  9.   /* istanbul ignore if */
  10.   // Vue不能挂载在body、html这样的根节点上
  11.   if (el === document.body || el === document.documentElement) {
  12.     process.env.NODE_ENV !== 'production' && warn(
  13.       `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
  14.     )
  15.     return this
  16.   }
  18.   const options = this.$options
  19.   // resolve template/el and convert to render function
  20.   // 没有定义render方法
  21.   if (!options.render) {
  22.     let template = options.template
  23.     if (template) {
  24.       if (typeof template === 'string') {
  25.         if (template.charAt(0) === '#') {
  26.           template = idToTemplate(template)
  27.           /* istanbul ignore if */
  28.           if (process.env.NODE_ENV !== 'production' && !template) {
  29.             warn(
  30.               `Template element not found or is empty: ${options.template}`,
  31.               this
  32.             )
  33.           }
  34.         }
  35.       } else if (template.nodeType) {
  36.         template = template.innerHTML
  37.       } else {
  38.         if (process.env.NODE_ENV !== 'production') {
  39.           warn('invalid template option:' + template, this)
  40.         }
  41.         return this
  42.       }
  43.     } else if (el) {
  44.       template = getOuterHTML(el)
  45.     }
  46.     if (template) {
  47.       /* istanbul ignore if */
  48.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  49.         mark('compile')
  50.       }
  52.       // compileToFunctions方法 写了el或者template属性最终都会转换成render方法  "在线编译"
  53.       const { render, staticRenderFns } = compileToFunctions(template, {
  54.         outputSourceRange: process.env.NODE_ENV !== 'production',
  55.         shouldDecodeNewlines,
  56.         shouldDecodeNewlinesForHref,
  57.         delimiters: options.delimiters,
  58.         comments: options.comments
  59.       }, this)
  60.       options.render = render
  61.       options.staticRenderFns = staticRenderFns
  63.       /* istanbul ignore if */
  64.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  65.         mark('compile end')
  66.         measure(`vue ${this._name} compile`, 'compile', 'compile end')
  67.       }
  68.     }
  69.   }
  70.   // 调用原先原型上的$mount方法挂载
  71.   return mount.call(this, el, hydrating)
  72. }

原先原型上的 $mount 方法

在 src/platform/web/runtime/index.js 中定义，之所以这么设计完全是为了复用，因为它是可以被runtime only版本的Vue直接使用的

  1. import { mountComponent } from 'core/instance/lifecycle'
  3. // public mount method
  4. // 公用的挂载方法
  5. Vue.prototype.$mount = function (
  6.   el?: string | Element,
  7.   hydrating?: boolean
  8. ): Component {
  9.   el = el && inBrowser ? query(el) : undefined
  10.   return mountComponent(this, el, hydrating)
  11. }

参数

  1. el - 挂载的元素，可以是字符串，也可以是DOM对象，如果是字符串在浏览器环境下会调用query方法转换成DOM对象的

  2. hydrating - 和服务端渲染相关，在浏览器环境下不需要传第二个参数

    mountComponent方法

    定义在 src/core/instance/lifecycle.js 文件中

    1. export function mountComponent (
    2. vm: Component,
    3. el: ?Element,
    4. hydrating?: boolean
    5. ): Component {
    6. vm.$el = el
    7. if (!vm.$options.render) {
    8.  vm.$options.render = createEmptyVNode
    9.  if (process.env.NODE_ENV !== 'production') {
    10.    /* istanbul ignore if */
    11.    if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
    12.      vm.$options.el || el) {
    13.      warn(
    14.        'You are using the runtime-only build of Vue where the template ' +
    15.        'compiler is not available. Either pre-compile the templates into ' +
    16.        'render functions, or use the compiler-included build.',
    17.        vm
    18.      )
    19.    } else {
    20.      warn(
    21.        'Failed to mount component: template or render function not defined.',
    22.        vm
    23.      )
    24.    }
    25.  }
    26. }
    27. callHook(vm, 'beforeMount')
    29. let updateComponent
    30. /* istanbul ignore if */
    31. if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    32.  updateComponent = () => {
    33.    const name = vm._name
    34.    const id = vm._uid
    35.    const startTag = `vue-perf-start:${id}`
    36.    const endTag = `vue-perf-end:${id}`
    38.    mark(startTag)
    39.    // 调用vm.render方法先生成虚拟Node 
    40.    const vnode = vm._render()
    41.    mark(endTag)
    42.    measure(`vue ${name} render`, startTag, endTag)
    44.    mark(startTag)
    45.    // 调用vm.update更新DOM
    46.    vm._update(vnode, hydrating)
    47.    mark(endTag)
    48.    measure(`vue ${name} patch`, startTag, endTag)
    49.  }
    50. } else {
    51.  updateComponent = () => {
    52.    vm._update(vm._render(), hydrating)
    53.  }
    54. }
    56. // we set this to vm._watcher inside the watcher's constructor
    57. // since the watcher's initial patch may call $forceUpdate (e.g. inside child
    58. // component's mounted hook), which relies on vm._watcher being already defined
    59. // 核心：实例化一个渲染Watcher 回调函数中会调用updateComponent方法
    60. // Watcher作用
    61. // 一是初始化的时候会执行回调函数
    62. // 二是当vm实例中的监测的数据发生变化的时候执行回调函数
    63. new Watcher(vm, updateComponent, noop, {
    64.  before () {
    65.    if (vm._isMounted && !vm._isDestroyed) {
    66.      callHook(vm, 'beforeUpdate')
    67.    }
    68.  }
    69. }, true /* isRenderWatcher */)
    70. hydrating = false
    72. // manually mounted instance, call mounted on self
    73. // mounted is called for render-created child components in its inserted hook
    74. // 判断为根节点
    75. if (vm.$vnode == null) {
    76.  // 表示这个实例已经挂载了
    77.  vm._isMounted = true
    78.  // 执行mounted钩子函数
    79.  callHook(vm, 'mounted')
    80. }
    81. return vm
    82. }

    vm.$vnode表示Vue实例的父虚拟Node，所以它为Null则表示当前时根Vue的实例