前端开发 vue框架详解：vue的生命周期函数—Vue生命周期函数全解析

Vue生命周期函数全解析：从创建到销毁的旅程

场景引入：一个组件的“一生”

想象你正在开发一个Vue组件，比如一个天气预报小卡片，它从诞生（创建）到显示在页面上（挂载），再到数据更新时自动刷新（更新），最后被移除（销毁），整个过程就像一个人的生命历程，Vue通过生命周期函数，让你能在每个关键节点插入自己的逻辑，比如在组件创建时请求数据，或者在销毁前清理定时器。

我们就来彻底搞懂Vue的生命周期函数，掌握它们的执行顺序和适用场景。

Vue生命周期函数概览

Vue的生命周期可以分为四个阶段：

1. 创建阶段（Creation）：组件初始化
2. 挂载阶段（Mounting）：组件插入DOM
3. 更新阶段（Updating）：数据变化触发重新渲染
4. 销毁阶段（Destruction）：组件被移除

每个阶段都有对应的钩子函数（Hook），让你在特定时机执行代码。

创建阶段（Creation）

这个阶段主要是组件的初始化和数据设置，尚未渲染DOM。

（1）beforeCreate

• 触发时机：实例刚创建，数据观测（data）和事件配置（methods）还未初始化。
• 适用场景：很少用，因为此时访问不到data和methods。

beforeCreate() {
  console.log("beforeCreate: 数据还没初始化", this.message); // undefined
}

（2）created

• 触发时机：数据观测（data）、计算属性（computed）、方法（methods）已初始化，但DOM还未生成。
• 适用场景：常用于异步数据请求，比如调用API获取初始数据。

created() {
  console.log("created: 数据已初始化", this.message); // 可访问
  this.fetchData(); // 假设这是一个API请求方法
}

挂载阶段（Mounting）

这个阶段涉及DOM的渲染和挂载。

（3）beforeMount

• 触发时机：模板编译完成，但尚未挂载到DOM。
• 适用场景：很少用，一般用于最后时刻的数据调整。

beforeMount() {
  console.log("beforeMount: 模板编译完成，但未渲染到DOM");
}

（4）mounted

• 触发时机：组件已挂载到DOM，可以访问DOM元素。
• 适用场景：操作DOM（如初始化图表库）、绑定事件监听（如window.addEventListener）。

mounted() {
  console.log("mounted: 组件已挂载");
  this.chart = new Chart(this.$refs.chartCanvas, { ... }); // 操作DOM
}

更新阶段（Updating）

当数据变化导致重新渲染时触发。

（5）beforeUpdate

• 触发时机：数据已更新，但DOM还未重新渲染。
• 适用场景：获取更新前的DOM状态（如滚动位置）。

beforeUpdate() {
  console.log("beforeUpdate: 数据变了，DOM还没更新");
  this.scrollPosition = this.$refs.list.scrollTop; // 记录滚动位置
}

（6）updated

• 触发时机：DOM已重新渲染完成。
• 适用场景：依赖DOM的操作（如调整元素尺寸），但要小心无限循环（避免在updated里直接修改数据）。

updated() {
  console.log("updated: DOM已更新");
  this.adjustLayout(); // 调整布局
}

销毁阶段（Destruction）

组件被移除时触发，用于清理工作。

（7）beforeDestroy

• 触发时机：组件即将销毁，但仍在内存中。
• 适用场景：清理定时器、取消事件监听、断开WebSocket等，防止内存泄漏。

beforeDestroy() {
  console.log("beforeDestroy: 组件即将销毁");
  clearInterval(this.timer); // 清除定时器
  window.removeEventListener("resize", this.handleResize); // 移除事件监听
}

（8）destroyed

• 触发时机：组件已销毁，所有绑定和监听被移除。
• 适用场景：一般用于日志记录或最终清理。

destroyed() {
  console.log("destroyed: 组件已销毁");
}

Vue生命周期执行顺序

1. 创建阶段：beforeCreate → created
2. 挂载阶段：beforeMount → mounted
3. 更新阶段：beforeUpdate → updated（可多次触发）
4. 销毁阶段：beforeDestroy → destroyed

常见使用场景

最后的小贴士

• 避免在updated里修改数据，可能导致无限循环。
• async/await可以在created或mounted中使用，但要注意错误处理。
• Vue 3的Composition API（setup）没有完全替代生命周期，而是提供了更灵活的组合方式（如onMounted、onUnmounted）。

掌握生命周期函数，你就能更精准地控制Vue组件的运行流程，写出更高效、更健壮的代码！ 🚀