实用指南：Vue 实例生命周期

一、什么是生命周期？

Vue 实例从创建到销毁的整个过程，称为生命周期。
在这个过程中，Vue 会在特定阶段自动调用一些函数，这些函数就是生命周期钩子（Lifecycle Hooks）。

你可以把它们理解为“生命阶段的回调函数”，在合适的时机执行特定逻辑。

二、Vue 2 生命周期图谱（经典八阶段）

以下是 Vue 2 的生命周期流程图（建议配图）：

beforeCreate↓created  ←←←←← (可发起请求)↓beforeMount↓mounted  ←←←←← (DOM 可访问，常用)↓beforeUpdate↓updated↓beforeDestroy↓destroyed

✅ 红色箭头表示组件可能被销毁后重新创建（如 v-if 切换）。

---

1. beforeCreate

• 触发时机：实例初始化之后，数据观测 (data observer) 和事件配置之前。
• 能做什么：几乎不能做任何事，data、methods 还未初始化。
• 使用场景：极少使用。

beforeCreate() {console.log('beforeCreate: ', this.message) // undefined
}

---

2. created

• 触发时机：实例创建完成，数据观测、属性和方法运算已完成。
• 能做什么：
  • 访问 data、methods
  • 发起 Ajax 请求
  • 设置定时器（注意清理）
• 不能做什么：访问 DOM（$el 为 undefined）

created() {console.log('created: ', this.message) // 正常输出this.fetchData() // ✅ 推荐在此发起请求
}

✅ 最佳实践：数据初始化、异步请求。

---

3. beforeMount

• 触发时机：模板编译完成，但尚未挂载到 DOM。
• 能做什么：很少使用，此时 $el 仍不可用。
• 注意：服务端渲染（SSR）不会调用此钩子。

beforeMount() {console.log('beforeMount: ', this.$el) // undefined
}

---

4. mounted

• 触发时机：实例挂载到 DOM 后，$el 被新创建的 vm.$el 替换。
• 能做什么：
  • 操作 DOM（如初始化第三方库：Swiper、ECharts）
  • 访问 $refs
  • 开始定时器
• 重要：组件已“可见”，是最常用的钩子之一。

mounted() {console.log('mounted: ', this.$el) // 可访问 DOMthis.initChart() // 初始化图表this.timer = setInterval(() => {// 轮询}, 5000)
}

✅ 最佳实践：DOM 操作、第三方库初始化、定时器启动。

---

5. beforeUpdate

• 触发时机：数据更新时，虚拟 DOM 重新渲染之前。
• 能做什么：获取更新前的 DOM 状态。
• 注意：不要在此修改状态，否则可能造成无限循环。

beforeUpdate() {console.log('视图更新前，数据是：', this.message)
}

---

6. updated

• 触发时机：数据更新后，虚拟 DOM 重新渲染并应用到 DOM。
• 能做什么：
  • DOM 操作（依赖更新后的 DOM）
  • 避免在此发起状态更新，可能造成循环
• 注意：子组件可能尚未更新。

updated() {console.log('视图已更新')// 可操作更新后的 DOM
}

⚠️ 避免在 updated 中修改 data，否则会再次触发更新。

---

7. beforeDestroy（Vue 2）/ beforeUnmount（Vue 3）

• 触发时机：实例销毁前，实例仍完全可用。
• 能做什么：
  • 清理定时器
  • 移除事件监听
  • 解除第三方库绑定
• 必须做：防止内存泄漏！

beforeDestroy() {clearInterval(this.timer)window.removeEventListener('resize', this.onResize)this.$refs.chart.dispose() // 如 ECharts
}

✅ 最佳实践：资源清理，必做！

---

8. destroyed（Vue 2）/ unmounted（Vue 3）

• 触发时机：实例销毁后，所有绑定和监听器被移除。
• 能做什么：很少使用，实例已不可用。

destroyed() {console.log('组件已销毁')
}

三、Vue 3 生命周期的变化

Vue 3 中，部分生命周期钩子名称更新，以与 Composition API 保持一致：

Vue 2	Vue 3
beforeDestroy	beforeUnmount
destroyed	unmounted

其他钩子名称不变。

Composition API 中的生命周期钩子

在 setup() 中，使用 onXxx 函数注册生命周期钩子：

<script>
import {onMounted,onUpdated,onUnmounted
} from 'vue'
export default {setup() {onMounted(() => {console.log('组件已挂载')})onUpdated(() => {console.log('组件已更新')})onUnmounted(() => {console.log('组件已卸载')// 清理资源})return {}}
}
</script>

✅ 所有 onXxx 函数必须在 setup() 或 <script setup> 中调用。

四、生命周期实战应用场景

1. 发起 API 请求

created() {this.loading = truefetch('/api/users').then(res => res.json()).then(data => {this.users = data}).finally(() => {this.loading = false})
}

✅ created 是发起请求的最佳时机。

---

2. 初始化第三方库

mounted() {this.chart = new Chart(this.$refs.canvas, {type: 'bar',data: this.chartData})
}

---

3. 清理资源（防内存泄漏）

export default {data() {return {timer: null}},mounted() {this.timer = setInterval(() => {this.updateTime()}, 1000)},beforeUnmount() {if (this.timer) {clearInterval(this.timer)this.timer = null}}
}

✅ 必须在 beforeUnmount 中清理！

---

4. 监听窗口事件

mounted() {window.addEventListener('resize', this.handleResize)
},
beforeUnmount() {window.removeEventListener('resize', this.handleResize)
}

五、常见问题与注意事项

❓ created 和 mounted 有什么区别？

阶段	能访问数据	能访问 DOM
created	✅	❌
mounted	✅	✅

✅ 数据请求放 created，DOM 操作放 mounted。

---

❓ 为什么不能在 beforeCreate 中访问 data？

因为此时 Vue 还未完成数据观测（Observer）的初始化。

---

❓ updated 会频繁触发吗？

会！每次数据更新都会触发 updated，避免在此执行昂贵操作。

---

❓ 子组件的生命周期顺序？

父组件 beforeCreate → created → beforeMount
↓
子组件 beforeCreate → created → mounted
↓
父组件 mounted

✅ 先子后父。

六、总结：生命周期钩子使用指南

钩子	是否常用	典型用途
created	✅	数据初始化、API 请求
mounted	✅	DOM 操作、第三方库初始化
beforeUpdate	⚠️	获取更新前状态
updated	⚠️	依赖更新后 DOM 的操作
beforeUnmount	✅	清理定时器、事件监听
unmounted	⚠️	组件销毁后通知

核心原则：在合适的时机做合适的事。

七、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！