Vue2 源码解析 (三) —— $mount

2023-09-28 21:09:52

大家好，欢迎来到 Vue2 源码解析系列的第三章。在上一章中，我们分析了 new Vue 之后的初始化实例各种属性的过程。今天，我们将继续讲解 $mount 方法。

mount 方法是 Vue 实例中一个非常重要的方法，它负责将组件挂载到 DOM 中。当我们使用 Vue 时，通常会先创建一个 Vue 实例，然后调用 mount 方法将它挂载到某个 DOM 元素上。这样，Vue 就会将组件的模板渲染到该元素中，并建立起组件与 DOM 的连接。

那么，$mount 方法内部是如何工作的呢？让我们一起来看看。

$mount 方法的实现

Vue.prototype.$mount = function (el, hydrating) {
  return this._mount(el, hydrating)
}

$mount 方法实际上是调用了实例的 _mount 方法，我们来看一下 _mount 方法的实现：

Vue.prototype._mount = function (el, hydrating) {
  const vm = this
  el = el && inBrowser ? query(el) : undefined
  // ... 省略部分代码 ...
  const parent = vm.$parent
  if (parent) {
    vm.$emit('beforeMount')
  }
  // ... 省略部分代码 ...
  if (!vm._isMounted) {
    vm._mount = function (hydrating) {}
    // ... 省略部分代码 ...
    vm._isMounted = true
    vm._mounted()
  }
  return vm
}

$mount 方法的工作流程

从 _mount 方法的实现中，我们可以看到 $mount 方法的工作流程大致如下：

首先，它会检查 el 参数是否为一个 DOM 元素。如果不是，则将其设置为 undefined。
然后，它会触发 beforeMount 事件。
接下来的代码中做了很多事情，包括创建组件的渲染函数、实例化组件的 watcher 等。
如果组件之前没有被挂载过，则会执行一些初始化操作，包括设置 _isMounted 为 true，触发 mounted 事件等。
最后，返回 Vue 实例本身。

$mount 方法的注意事项

在使用 $mount 方法时，需要注意以下几点：

el 参数可以是一个 DOM 元素、一个 CSS 选择器字符串，或者是一个 Vue 组件对象。
$mount 方法只能被调用一次。如果再次调用，则会抛出错误。
$mount 方法会将组件渲染到 DOM 中，并建立起组件与 DOM 的连接。这意味着，组件的状态将与 DOM 元素的状态同步。
mount 方法不会自动触发组件的 updated 事件。如果需要在组件挂载后触发 updated 事件，则需要手动调用 vm.forceUpdate() 方法。