框架揭秘：Vue.js mounted 生命周期钩子的运作机制

2023-09-23 01:42:47

Vue.js 的 mounted 生命周期钩子：解析执行机制、作用和用法

简介

Vue.js 的 mounted 生命周期钩子是组件渲染过程中的一个重要环节，它可以在组件第一次被挂载到 DOM 后执行特定的操作。为了更好地理解 mounted 钩子的运作机制，本文将从源码的角度进行解析，并探讨其作用和用法。

mounted 的执行时机

mounted 钩子会在组件第一次被挂载到 DOM 后执行，通常在组件创建完成后立即执行。在组件的创建过程中，Vue.js 会执行一系列操作，包括创建组件实例、编译模板、创建虚拟 DOM、渲染虚拟 DOM 等。当所有这些操作完成后，组件就会被挂载到 DOM 中，此时 mounted 钩子就会被触发。

mounted 的作用

mounted 钩子可以用来执行各种各样的操作，包括但不限于以下几点：

对组件进行初始化操作，例如设置组件的初始状态。
获取 DOM 元素并进行操作，例如绑定事件监听器、获取元素的尺寸等。
与其他组件进行通信，例如发送或接收事件。
发起网络请求，例如获取数据或提交表单。

mounted 的源码解析

为了更好地理解 mounted 钩子的运作机制，我们不妨从源码的角度进行解析。在 Vue.js 的源码中，mounted 钩子的实现位于 src/core/instance/lifecycle.js 文件中。该文件定义了 Vue.js 组件的生命周期钩子，包括 created、mounted、updated、activated、deactivated 等。

Vue.prototype._mounted = function () {
  // 调用 beforeMount 钩子
  callHook(this, 'beforeMount')

  // 设置组件的 isMounted 标志为 true
  this._isMounted = true

  // 调用 mounted 钩子
  callHook(this, 'mounted')
}

从上面的代码可以看出，mounted 钩子的实现非常简单。它首先会调用 beforeMount 钩子，然后设置组件的 _isMounted 标志为 true，最后调用 mounted 钩子。

beforeMount 钩子会在组件挂载到 DOM 之前执行，而 mounted 钩子会在组件挂载到 DOM 之后执行。_isMounted 标志用于标识组件是否已经挂载到 DOM 中。

mounted 的使用示例

以下是一个使用 mounted 钩子的示例：

Vue.component('my-component', {
  template: '<div>Hello, world!</div>',
  mounted() {
    // 在组件挂载到 DOM 后执行
    console.log('Component is mounted!')
  }
})

在这个示例中，我们在 my-component 组件的 mounted 钩子中输出了一条消息。当组件被挂载到 DOM 后，这条消息就会被输出到控制台中。