当前位置：首页 > article >正文

Vue 2 生命周期详解

article 2024/9/21 21:59:39

Vue 2 的生命周期是指 Vue 实例从创建到销毁的整个过程。在这个过程中，Vue 提供了多个生命周期钩子，允许我们在不同阶段执行代码。以下是 Vue 2 生命周期的详细解析：

1. 创建阶段 (Creation)

beforeCreate: 在实例初始化之后，数据观测和事件/侦听器配置之前被调用。在这一步，data 属性和 methods 方法还未被初始化，因此不能访问。
created: 实例已经创建完成，数据观测、属性和方法的运算以及事件/侦听器的配置已经完成。然而，挂载阶段还没开始，$el 属性目前不可见。

2. 挂载阶段 (Mounting)

beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用，模板开始编译，但 $el 还未挂载到实例上。
mounted: 实例被挂载到 DOM 后调用。此时，可以访问到 $el 属性，并且模板中的 HTML 已经被渲染到页面上。这个阶段适合执行 DOM 操作或者执行依赖于 DOM 的操作，如发送 AJAX 请求或者绑定自定义事件。

3. 更新阶段 (Updating)

beforeUpdate: 在数据变化导致虚拟 DOM 重新渲染和打补丁之前调用。此时，可以在这个钩子中进一步地更改状态，不会导致无限循环的调用。
updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，可以执行依赖于最新 DOM 的操作。

4. 销毁阶段 (Destruction)

beforeDestroy: 在实例销毁之前调用。实例仍然完全可用，在这个生命周期钩子中，可以执行清理工作，如清除定时器、移除自定义事件监听等。
destroyed: 实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。

5. 特殊钩子 (Special Hooks)

activated: 仅在 keep-alive 组件中生效，当组件被激活时调用。
deactivated: 仅在 keep-alive 组件中生效，当组件被停用时调用。

代码示例

new Vue({
  data: {
    a: 1
  },
  beforeCreate() {
    console.log('beforeCreate: 数据和方法还未初始化');
  },
  created() {
    console.log('created: 数据和方法已初始化，但 DOM 还未挂载');
  },
  beforeMount() {
    console.log('beforeMount: 模板编译完成，但 DOM 还未挂载');
  },
  mounted() {
    console.log('mounted: DOM 已挂载，可以执行 DOM 操作');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新，DOM 未渲染');
  },
  updated() {
    console.log('updated: 数据更新，DOM 已渲染');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁前，可以进行清理操作');
  },
  destroyed() {
    console.log('destroyed: 实例销毁后');
  }
});