Vue 2 中完整的生命周期钩子函数

梁林烁
172 阅读4分钟

在 Vue 2 中，生命周期钩子函数是 Vue 实例从创建到销毁过程中自动调用的一些函数。开发者可以通过这些钩子函数在特定的阶段执行自定义逻辑。以下是 Vue 2 中完整的生命周期钩子函数及其执行顺序：

创建阶段

  • beforeCreate：在这个钩子被调用的时候，组件实例刚刚完成属性（例如 data、methods、watch 等）初始化，但是尚未开始挂载，此时还未开始编译模板。
  • created：在实例创建完成后立即调用。在这一步，已经完成了数据观测 (data observer) 和事件配置 (event/config)，但还没有开始挂载，$el 属性还不可用。

挂载阶段

  • beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。此时虚拟 DOM 已经创建完成，但尚未渲染到页面上。
  • mounted：当挂载过程完成，所有的指令已被初始化，并且如果使用了 el 选项，则 vm.$el 替换了指定的元素，DOM 已经被渲染。

更新阶段

  • beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除添加的事件监听器。
  • updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。此时可以执行依赖于 DOM 的操作。

销毁阶段

  • beforeDestroy（或 beforeUnmount 在 Vue 3 中）：实例销毁之前调用。在这一步，实例仍然完全可用。
  • destroyed（或 unmounted 在 Vue 3 中）：Vue 实例销毁后调用。调用之后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

每个生命周期钩子都是开发者可以在特定时刻插入自定义逻辑的地方，这对于开发复杂的交互式用户界面非常重要。请注意，随着 Vue.js 版本的发展，一些生命周期钩子的名字可能会有所变化（如在 Vue 3 中），但它们的基本概念和用途保持不变。

生命周期钩子函数详解

1. 创建阶段

  • beforeCreate

    • 调用时机：实例初始化之后，数据观测（data observer）和事件配置之前。
    • 特点：此时无法访问 data、methods 等属性。
    • 用途：通常用于插件初始化。

  • created

    • 调用时机：实例创建完成，数据观测和事件配置已完成。
    • 特点：可以访问 data、methods，但 DOM 还未生成。
    • 用途：常用于异步请求数据。

2. 挂载阶段

  • beforeMount

    • 调用时机：模板编译完成，但尚未将虚拟 DOM 渲染为真实 DOM。
    • 特点：此时 $el 属性还未替换为真实的 DOM 元素。
    • 用途：很少使用，可以在渲染前做一些操作。

  • mounted

    • 调用时机：实例挂载完成，DOM 已渲染。
    • 特点：可以访问真实的 DOM 元素。
    • 用途：常用于操作 DOM 或初始化第三方库。

3. 更新阶段

  • beforeUpdate

    • 调用时机：数据更新时，虚拟 DOM 重新渲染之前。
    • 特点：此时 DOM 还未更新。
    • 用途：可以在更新前获取当前 DOM 状态。

  • updated

    • 调用时机：数据更新完成，虚拟 DOM 重新渲染并更新真实 DOM。
    • 特点：此时 DOM 已更新。
    • 用途：常用于操作更新后的 DOM。

4. 销毁阶段

  • beforeDestroy

    • 调用时机：实例销毁之前。
    • 特点：此时实例仍然完全可用。
    • 用途：常用于清理定时器、解绑事件等。

  • destroyed

    • 调用时机：实例销毁完成。
    • 特点：所有的事件监听器和子实例已被移除。
    • 用途：用于最终清理工作。

代码示例

1new Vue({
2  el: '#app',
3  data: {
4    message: 'Hello Vue!'
5  },
6  beforeCreate() {
7    console.log('beforeCreate: 实例初始化，数据未观测');
8  },
9  created() {
10    console.log('created: 实例创建完成，数据已观测');
11  },
12  beforeMount() {
13    console.log('beforeMount: 模板编译完成，DOM 未渲染');
14  },
15  mounted() {
16    console.log('mounted: DOM 已渲染');
17  },
18  beforeUpdate() {
19    console.log('beforeUpdate: 数据更新，DOM 未更新');
20  },
21  updated() {
22    console.log('updated: DOM 已更新');
23  },
24  beforeDestroy() {
25    console.log('beforeDestroy: 实例销毁前');
26  },
27  destroyed() {
28    console.log('destroyed: 实例销毁完成');
29  }
30});

生命周期钩子的使用场景

  1. created：发起异步请求（如 API 调用）。
  2. mounted：操作 DOM 或初始化第三方库（如图表库、地图库）。
  3. beforeDestroy：清理资源（如定时器、事件监听器）。
  4. updated：在 DOM 更新后执行某些操作。

注意事项

  • 避免在 beforeCreate 和 created 中操作 DOM，因为此时 DOM 还未生成。
  • 在 beforeDestroy 中清理资源，避免内存泄漏。
  • 生命周期钩子是同步的，异步操作（如 setTimeout 或 axios）不会阻塞生命周期。

通过理解 Vue 2 的生命周期钩子，可以更好地控制组件的创建、更新和销毁过程，从而编写出更高效、更健壮的代码。

avatar
文章
阅读
粉丝