Vue2中的组件生命周期

在 Vue 2 中，组件的生命周期指的是从组件创建到销毁的过程中的一系列钩子函数。每个阶段都有对应的生命周期钩子，可以在这些钩子中执行相应的逻辑。下面是 Vue 2 组件生命周期的主要阶段及其对应的钩子函数:

创建阶段

beforeCreate

作用: 实例初始化之后，数据观测和事件配置之前调用。此时 data、methods 和 computed 等都还未初始化。

用途: 通常不需要在这个钩子里做事情，因为此时无法访问到实例的 data 和 methods。有些高级用例可能需要在这里进行初始化之前的操作。

示例:

​
beforeCreate() {
  console.log('beforeCreate: 实例刚开始初始化，数据和事件尚未配置');
}

​

create

作用:实例创建完成后立即调用。此时，实例的数据、计算属性、方法都已经初始化，并且可以访问到。

用途:适合进行一些初始化操作，比如从 API 加载数据、设置定时器等。

示例:

created() {
  console.log('created: 实例已经创建，数据和方法已初始化');
  this.fetchData(); // 加载数据
}

挂载阶段

beforeMount

作用:在挂载开始之前调用。此时模板还没有被渲染，相关的 render 函数还未被调用。

用途:用于在组件挂载之前进行最后的准备，比如对 DOM 元素进行操作。

示例:

beforeMount() {
  console.log('beforeMount: 挂载开始，DOM 还未创建');
}

mounted

作用:实例挂载完成后调用，此时 DOM 已经被插入页面中。

用途:适合进行需要操作 DOM 的逻辑，比如第三方库的初始化、测量 DOM 元素的尺寸等。

示例:

mounted() {
  console.log('mounted: DOM 已经插入到页面');
  this.initializeChart(); // 初始化图表
}

 更新阶段

beforeUpdate

作用:数据更新之前调用。在此时，新的虚拟 DOM 尚未渲染到页面中，旧的 DOM 仍然存在。

用途: 可以用于数据更新前的一些准备工作，如保存旧数据、处理动画等。

示例:

beforeUpdate() {
  console.log('beforeUpdate: 数据更新之前');
}

updated

作用:数据更新后调用，此时新的虚拟 DOM 已经渲染到页面中。

用途:适合进行依赖于更新后 DOM 的操作，比如获取新的 DOM 尺寸、更新第三方库等。

示例:

updated() {
  console.log('updated: 数据更新后');
  this.updateChart(); // 更新图表
}

销毁阶段

beforeDestroy

作用:实例销毁之前调用。在此时，组件仍然可以访问数据和方法，但组件的 DOM 元素尚未被销毁。

用途:适合进行清理操作，如取消定时器、解绑事件监听等。

示例:

beforeDestroy() {
  console.log('beforeDestroy: 实例销毁之前');
  this.cleanup(); // 清理操作
}

destroyed 

作用:实例销毁后调用。此时，组件的所有子组件、事件监听、数据等都会被销毁。

用途:通常用于最后的清理工作，比如移除全局事件监听等。

示例:

destroyed() {
  console.log('destroyed: 实例已经销毁');
}

 生命周期钩子函数使用场景

数据获取:created是获取初始数据的好时机。

DOM操作:mounted适合进行 DOM 操作或第三方库的初始化。

数据变化:updated可用于在数据变化后更新视图或进行其他操作

资源清理:beforeDestroy和destroyed用于清理组件资源，如取消订阅、移除事件监听等。