在 Vue.js 开发中，理解组件的生命周期是构建健壮应用程序的关键。虽然 Vue3 引入了 Composition API，但 Options API 仍然是许多开发者的首选，特别是对于从 Vue2 迁移的项目或更喜欢基于选项的代码组织的团队。本文将深入探讨 Vue3 中 Options API 的生命周期函数，帮助您掌握组件从创建到销毁的完整过程。

1. 生命周期概览

Vue3 的生命周期与 Vue2 相比有一些变化，主要是为了更好的支持 Composition API 并优化性能。以下是完整的生命周期图示：

setup (Composition API 特有)
|
└── beforeCreate└── created└── beforeMount└── mounted├── beforeUpdate│   └── updated├── activated (keep-alive 组件特有)│   └── deactivated (keep-alive 组件特有)└── beforeUnmount└── unmounted

2. 各生命周期钩子详解

2.1 beforeCreate

触发时机：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

典型用途：

执行一些不依赖响应式数据的初始化逻辑
设置一些实例属性，这些属性可能在后续的 created 钩子中使用

export default {beforeCreate() {console.log('beforeCreate: 实例刚创建，数据观测未初始化');console.log(this.$data); // undefinedconsole.log(this.someData); // undefined},data() {return {someData: 'Hello'}}
}

2.2 created

触发时机：在实例创建完成后被立即调用。在这一步，实例已完成以下配置：

数据观测 (data observer)
属性和方法的运算
watch/event 事件回调

典型用途：

访问响应式数据
发起异步请求获取数据
初始化一些需要响应式数据的逻辑

export default {data() {return {message: 'Hello Vue!'}},created() {console.log('created: 实例已创建，数据观测已初始化');console.log(this.message); // 'Hello Vue!'// 发起API请求this.fetchData();},methods: {fetchData() {// 异步数据获取逻辑}}
}

2.3 beforeMount

触发时机：在挂载开始之前被调用，相关的 render 函数首次被调用。

典型用途：

在组件挂载到DOM之前执行最后的准备工作
很少需要在此钩子中进行操作，大多数情况下使用 created 或 mounted 更合适

export default {beforeMount() {console.log('beforeMount: 模板编译完成，即将挂载到DOM');console.log(this.$el); // undefined，尚未挂载}
}

2.4 mounted

触发时机：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换。

典型用途：

访问或操作DOM元素
集成第三方库需要DOM存在的场景
执行依赖于DOM的初始化操作

export default {mounted() {console.log('mounted: 实例已挂载到DOM');console.log(this.$el); // 可以访问DOM元素// 使用第三方图表库this.initChart();},methods: {initChart() {const ctx = this.$refs.chartCanvas.getContext('2d');// 初始化图表...}}
}

2.5 beforeUpdate

触发时机：数据更新时调用，发生在虚拟 DOM 打补丁之前。

典型用途：

在组件更新前访问现有的DOM状态
跟踪组件更新前的状态

export default {data() {return {counter: 0}},beforeUpdate() {console.log('beforeUpdate: 数据即将更新');console.log('当前值:', this.$refs.counter.textContent);}
}

2.6 updated

触发时机：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

典型用途：

执行依赖于DOM更新的操作
谨慎使用，避免在此钩子中修改状态，可能导致无限更新循环

export default {data() {return {items: []}},updated() {console.log('updated: DOM已更新');// 在列表更新后滚动到底部this.$refs.list.scrollTop = this.$refs.list.scrollHeight;}
}

2.7 beforeUnmount (Vue2中的beforeDestroy)

触发时机：实例销毁之前调用。在这一步，实例仍然完全可用。

典型用途：

清理定时器
取消事件监听
清理第三方库的实例

export default {data() {return {timer: null}},created() {this.timer = setInterval(() => {console.log('Timer tick');}, 1000);},beforeUnmount() {console.log('beforeUnmount: 实例即将销毁');clearInterval(this.timer);}
}

2.8 unmounted (Vue2中的destroyed)

触发时机：实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

典型用途：

执行最后的清理工作
报告分析数据或日志

export default {unmounted() {console.log('unmounted: 实例已销毁');// 发送日志this.sendAnalytics('Component destroyed');}
}

2.9 activated 和 deactivated (keep-alive 特有)

触发时机：

activated：被 keep-alive 缓存的组件激活时调用
deactivated：被 keep-alive 缓存的组件失活时调用

典型用途：

恢复或暂停组件特定的行为
获取最新数据（activated）
保存组件状态（deactivated）

export default {activated() {console.log('activated: 组件被激活');// 获取最新数据this.fetchData();},deactivated() {console.log('deactivated: 组件被缓存');// 保存滚动位置this.scrollPosition = this.$refs.list.scrollTop;}
}

3. Vue2 到 Vue3 的生命周期变化

重命名：
- beforeDestroy → beforeUnmount
- destroyed → unmounted
新增：
- renderTracked 和 renderTriggered（主要用于调试）
行为变化：
- 生命周期钩子现在都使用异步队列执行，确保一致性

4. 最佳实践

数据获取：通常在 created 钩子中进行异步数据获取，这样可以在组件挂载前尽早开始请求。
DOM操作：必须在 mounted 钩子中进行，因为只有这时DOM才存在。
清理工作：在 beforeUnmount 中清理定时器、事件监听器等，防止内存泄漏。
避免在 updated 中修改状态：这可能导致无限更新循环。
keep-alive 组件优化：使用 activated 和 deactivated 来管理缓存组件的状态。
代码组织：将相关生命周期逻辑分组注释，提高代码可读性。

export default {// 数据相关data() { /* ... */ },created() { /* 数据初始化 */ },// DOM相关mounted() { /* DOM操作 */ },beforeUnmount() { /* 清理DOM相关资源 */ },// 状态更新相关beforeUpdate() { /* 更新前操作 */ },updated() { /* 更新后操作 */ },// keep-alive相关activated() { /* 恢复状态 */ },deactivated() { /* 保存状态 */ }
}