Vue2源码梳理：关于vm.$mount的实现

关注

原创最新推荐文章于 2026-06-08 14:33:18 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

Vue源码解析-$mount 前言 Vue实例是通过mount方法进行挂载的，上一篇说了new Vue这篇分析一下mount挂载方法。mount的定义在Vue源码中有多处，这是因为Vue需要适配不同的平台以及构建方式，本文这里主要分析一下带compiler的mount实现方式。找入口因为是需要适配不同平台，mount方法定义在src/platform/web/entry-runtime-with-compiler.js下，代码如下： const mount = Vue.prototype.$mount Vue.prototype.$ 阅读详情

$mount

vue实例挂载的实现，也就是执行 vm.$mount 的方法
在 Runtime + Compiler 版本，入口文件是: src/platform/web/entry-runtime-with-compiler.js

$mount 方法也是在这个文件中被定义的

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  // 首先对于传入的这个 el 参数，做了一个处理，可以看到 el 参数，可以是个字符串，也可以是个 Element
  // 这里调用了query方法，query方法实际上就是原生的方法，有则document.querySelector，无则，document.createElement 返回一个div 等处理
  el = el && query(el)

  // 拿到这个 el 以后，这里就已经被转化成了这个 dom 对象，然后它又做了一个简单的判断
  // 也就是说我的 el 如果是 body 或者是 html 标签的话，它就会报一个错
  // 就是 vue 不可以直接挂载到这个 body 或者 html 上，因为它是会覆盖的，你挂载的话，你会把整个body覆盖，那整个HTML文档不对了
  // 所以说这里在开发环境下，就报了这个警告
  /* istanbul ignore if */
  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
  }
  // 拿到这个options。判断有没有定义render方法，因为平时开发的过程中，代码都是脚手架生成，会有一个 render
  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    // 再次判断你有没有写template，一般模板默认是有index.html的，在组件内部也可以使用 template, 有则进行处理
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          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) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      // 如果没有 templete 则执行 getOuterHTML 拿到html
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      // 这一块就是跟编译相关了, 编译的话，它其实是调用这个 compileToFunction
      // 拿到生成的一个 render 函数，还有 staticRenderFns
      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      // 这个 options.render 会在渲染 vnode 的时候会用到
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  // 调用 mount, 这个mount 是 runtimeOnly 时的 $mount
  return mount.call(this, el, hydrating)
}

它首先获得了 Vue.prototype.$mount 方法，用这个 mount 变量缓存起来，然后又重新定义了一遍这个方法

回到最初的定义，在 src/platforms/web/runtime/index.js 中，是最原始的定义

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

// devtools global hook
/* istanbul ignore next */
if (inBrowser) {
  setTimeout(() => {
    if (config.devtools) {
      if (devtools) {
        devtools.emit('init', Vue)
      } else if (
        process.env.NODE_ENV !== 'production' &&
        process.env.NODE_ENV !== 'test'
      ) {
        console[console.info ? 'info' : 'log'](
          'Download the Vue Devtools extension for a better development experience:\n' +
          'https://github.com/vuejs/vue-devtools'
        )
      }
    }
    if (process.env.NODE_ENV !== 'production' &&
      process.env.NODE_ENV !== 'test' &&
      config.productionTip !== false &&
      typeof console !== 'undefined'
    ) {
      console[console.info ? 'info' : 'log'](
        `You are running Vue in development mode.\n` +
        `Make sure to turn on production mode when deploying for production.\n` +
        `See more tips at https://vuejs.org/guide/deployment.html`
      )
    }
  }, 0)
}

在我们的这个入口, 为什么会重新定义一遍 $mount？
实际上, 上面这块最原始的代码是给 RuntimeOnly 版本复用用的一个函数
在 Runtime + Compiler 版本，在 src/core/instance/init.js 的 initMixin 中
执行 vm.$mount 时候，实际上调的就是 src/platform/web/entry-runtime-with-compiler.js 这个入口文件
中的 Vue.prototype.$mount 这个函数，现在回到入口文件中的代码中，查看相关代码上的注释
在执行了入口文件中的 .$mount, 最终调用了 RuntimeOnly 的 $mount, 最终执行 mountComponent 方法

而 mountComponent 是在 src/core/instance/lifecycle.js 中定义的

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // 首先会把这个 el 的dom 被 vm.$el 缓存起来
  vm.$el = el
  // 判断有没有 render 函数(或没有 template转换来的 render), 没有则创建一个空的 vnode, 并在开发环境警告
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    // 这个警告就是写了 template，但是没有使用含有编译的版本，或者两者都没有写
    if (process.env.NODE_ENV !== 'production') {
      /* 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
        )
      }
    }
  }

  // 这里先执行 beforeMount 的钩子函数，跳过
  callHook(vm, 'beforeMount')

  let updateComponent
  // 在dev环境上是更多做了性能埋点相关的处理，当性能比较卡顿时，可以利用这些东西，看文档就行，跳过
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && 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)
    }
  }

  // 这个函数就是调用了 vm._update，第一个参数是通过 vm._render渲染出来一个vnode, 第二个参数理解为 false 就可以了
  // 之后，调用 new Watcher 这里实际上是 渲染 watcher
  // 因为 watcher 这个东西其实是跟响应式原理强相关的一个类
  // 它实际上就是一个观察者模式，它其实有很多自定义 watcher，也会有一个叫渲染 watcher
  // 调用 new Watcher 的的时候，三个参数，第一个vm, 第二个 updateComponent函数, 第三个 noop(空函数), 第四个配置对象，第五个布尔值
  // 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, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */) // 注意这里第5个参数是 true, 表示是一个渲染watcher
  hydrating = false

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

进入 Watcher 的定义，在 src/core/observer/watcher.js 中

/**
 * A watcher parses an expression, collects dependencies,
* and fires callback when the expression value changes.
* This is used for both the $watch() api and directives.
*/
export default class Watcher {
  vm: Component;
  expression: string;
  cb: Function;
  id: number;
  deep: boolean;
  user: boolean;
  lazy: boolean;
  sync: boolean;
  dirty: boolean;
  active: boolean;
  deps: Array<Dep>;
  newDeps: Array<Dep>;
  depIds: SimpleSet;
  newDepIds: SimpleSet;
  before: ?Function;
  getter: Function;
  value: any;

  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean // 是否是渲染 watcher
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this) // 收集watcher
    // 这里忽略这个options
    // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.lazy = !!options.lazy
      this.sync = !!options.sync
      this.before = options.before
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.lazy // for lazy watchers
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    // 注意这里，这里就是调用方传进来的 updateComponent
    // parse expression for getter
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = noop
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get()
  }

  // 这里有依赖收集，相关的
  /**
   * Evaluate the getter, and re-collect dependencies.
  */
  get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm) // 这里会调用 getter, 也就是上层调用方传进来的 updateComponent 方法，就会执行方法内部的 update
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value)
      }
      popTarget()
      this.cleanupDeps()
    }
    return value
  }

  /**
   * Add a dependency to this directive.
  */
  addDep (dep: Dep) {
    const id = dep.id
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      if (!this.depIds.has(id)) {
        dep.addSub(this)
      }
    }
  }

  /**
   * Clean up for dependency collection.
  */
  cleanupDeps () {
    let i = this.deps.length
    while (i--) {
      const dep = this.deps[i]
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this)
      }
    }
    let tmp = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
  }

  /**
   * Subscriber interface.
  * Will be called when a dependency changes.
  */
  update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

  /**
   * Scheduler job interface.
  * Will be called by the scheduler.
  */
  run () {
    if (this.active) {
      const value = this.get()
      if (
        value !== this.value ||
        // Deep watchers and watchers on Object/Arrays should fire even
        // when the value is the same, because the value may
        // have mutated.
        isObject(value) ||
        this.deep
      ) {
        // set new value
        const oldValue = this.value
        this.value = value
        if (this.user) {
          const info = `callback for watcher "${this.expression}"`
          invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info)
        } else {
          this.cb.call(this.vm, value, oldValue)
        }
      }
    }
  }

  /**
   * Evaluate the value of the watcher.
  * This only gets called for lazy watchers.
  */
  evaluate () {
    this.value = this.get()
    this.dirty = false
  }

  /**
   * Depend on all deps collected by this watcher.
  */
  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }

  /**
   * Remove self from all dependencies' subscriber list.
  */
  teardown () {
    if (this.active) {
      // remove self from vm's watcher list
      // this is a somewhat expensive operation so we skip it
      // if the vm is being destroyed.
      if (!this.vm._isBeingDestroyed) {
        remove(this.vm._watchers, this)
      }
      let i = this.deps.length
      while (i--) {
        this.deps[i].removeSub(this)
      }
      this.active = false
    }
  }
}

总结下 $mount

1 ) 在含有 compiler 版本中，先对 el 做一些处理
2 ) 在没有定义 render 函数的时候，尝试获取一下 render 函数
- 也就是说，把整个template通过一系列的逻辑判断，也是因为它支持很多很多种写法
  - 可以直接写 template
  - 也可以直接 template 是个dom对象
  - 如果不写 templete 的话，通过 el 的 outHTML 来获取这个 templete
- 把这个template 通过这个编译的手段也转化成这个render函数
- 也就是说整个 $mount 在这个带compiler版本的前提，要拿到这个render函数
3 ) 然后就会调用这个 mountComponent 的这个方法
- 这个方法其实很简单，就是定义了 updateComponent 这个函数
4 ) 这个函数它实际上被用到渲染 watcher 里面，为什么要通过 watcher 呢？
- 是因为这个 updateComponent 这个方法，实际上执行了一次真实的渲染
- 这个渲染过程，除了我们首次，之后再更新数据的时候，还是会触发这个渲染watcher
- 再次执行这个updateComponent方法，它是一个监听到执行的这样一个过程
- 当我们的数据发生变化，它的更新入口也是这个 updateComponent 方法
- 这就是渲染 watcher所要做的事情