Vue 实例选项
关键要点
- Vue3 生命周期钩子是组件在创建、更新、销毁等阶段触发的函数，用于执行特定逻辑。
- 主要钩子包括
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。 - Vue3 支持 Options API 和组合式 API，组合式 API 使用
onMounted等函数替代传统钩子。 - 研究表明，生命周期钩子提高了代码的模块化管理能力，适合处理初始化、DOM 操作和清理任务。
什么是生命周期钩子？
Vue3 生命周期钩子是组件在不同阶段（如创建、挂载、更新、卸载）自动调用的特殊函数。开发者可以在这些钩子中插入自定义逻辑，例如初始化数据、操作 DOM 或清理资源。每个组件实例都有独立的生命周期。
Vue3 生命周期钩子概览
以下是 Vue3 的主要生命周期钩子及其功能：
| 钩子 | 触发时机 | 典型用途 |
|---|---|---|
beforeCreate | 组件实例初始化前 | 设置初始状态（少用） |
created | 组件实例创建后，数据和方法可用 | 初始化数据、调用 API |
beforeMount | 组件挂载到 DOM 前 | 准备 DOM 操作 |
mounted | 组件挂载到 DOM 后 | DOM 操作、初始化第三方库 |
beforeUpdate | 组件更新前，响应式数据变化 | 记录更新前的状态 |
updated | 组件更新后，DOM 已更新 | 处理更新后的 DOM |
beforeUnmount | 组件卸载前 | 清理定时器、事件监听器 |
unmounted | 组件卸载后 | 释放资源 |
使用方式
- Options API：在组件选项中直接定义钩子函数。
<script>
export default {
created() {
console.log('组件已创建')
},
mounted() {
console.log('组件已挂载')
}
}
</script>- 组合式 API：使用
on前缀的函数（如onMounted），需从vue导入。
<script setup>
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
console.log('组件已挂载')
})
onUnmounted(() => {
console.log('组件已卸载')
})
</script>示例
以下是一个结合 Options API 和组合式 API 的示例：
<template>
<div>{{ message }}</div>
</template>
<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'
const message = ref('Hello, Vue3!')
onMounted(() => {
console.log('Mounted: 组件已挂载')
})
onUpdated(() => {
console.log('Updated: 组件已更新')
})
onUnmounted(() => {
console.log('Unmounted: 组件已卸载')
})
</script>详细报告
Vue3 的生命周期钩子（Lifecycle Hooks）是组件在不同阶段自动调用的函数，用于在创建、挂载、更新和销毁等阶段执行自定义逻辑。以下是对 Vue3 生命周期钩子的全面讲解，涵盖定义、功能、使用方式、组合式 API 的支持以及实践建议。
背景与定义
Vue 组件的生命周期是指组件从创建到销毁的整个过程。每个阶段都会触发特定的钩子函数，开发者可以在这些钩子中插入逻辑，例如初始化数据、操作 DOM 或清理资源。研究表明，生命周期钩子提高了代码的模块化管理能力，使得开发者能够更清晰地控制组件的行为。
Vue3 保留了 Vue2 的生命周期钩子，但在组合式 API 中引入了新的调用方式（如 onMounted），以适应函数式编程风格。生命周期钩子在 Options API 和组合式 API 中均可用，提供了灵活的选择。
Vue3 生命周期钩子详解
以下是 Vue3 的所有生命周期钩子，按执行顺序说明：
beforeCreate
- 触发时机：组件实例初始化之前，数据和事件尚未设置。
- 用途：极少使用，通常用于设置初始状态或全局配置。
- 示例：
javascript beforeCreate() { console.log('beforeCreate: 数据不可用', this.message) // undefined } - 注意：此时无法访问
data、props或methods，因为它们尚未初始化。
created
- 触发时机：组件实例创建完成，数据和方法已可用，但尚未挂载到 DOM。
- 用途：初始化数据、调用 API 或设置事件监听。
- 示例：
javascript created() { console.log('created: 数据可用', this.message) // 'Hello' this.fetchData() } - 注意：此时无法访问 DOM，因为组件尚未挂载。
beforeMount
- 触发时机：组件挂载到 DOM 之前，模板已编译但未渲染。
- 用途：准备 DOM 操作或检查初始状态。
- 示例：
javascript beforeMount() { console.log('beforeMount: DOM 未挂载', this.$el) // undefined } - 注意：适合进行最后的配置调整，但不推荐过多操作。
mounted
- 触发时机：组件挂载到 DOM 后，模板已渲染。
- 用途：操作 DOM、初始化第三方库（如 Chart.js）、设置定时器。
- 示例：
javascript mounted() { console.log('mounted: DOM 已挂载', this.$el) this.$el.focus() } - 注意：确保 DOM 操作安全，避免在服务器端渲染（SSR）中执行。
beforeUpdate
- 触发时机：响应式数据变化导致组件更新前，DOM 未更新。
- 用途：记录更新前的状态或阻止不必要的更新。
- 示例：
javascript beforeUpdate() { console.log('beforeUpdate: DOM 未更新', this.$el.textContent) } - 注意：适合捕获旧状态，但不建议直接修改数据以避免死循环。
updated
- 触发时机：组件更新后，DOM 已更新。
- 用途：处理更新后的 DOM 或执行副作用。
- 示例：
javascript updated() { console.log('updated: DOM 已更新', this.$el.textContent) } - 注意：避免在
updated中修改数据，可能导致无限更新。
beforeUnmount
- 触发时机：组件卸载前，组件仍完全可用。
- 用途：清理定时器、事件监听器或订阅。
- 示例：
javascript beforeUnmount() { console.log('beforeUnmount: 清理资源') clearInterval(this.timer) } - 注意：确保清理所有副作用，防止内存泄漏。
unmounted
- 触发时机：组件卸载后，DOM 已移除。
- 用途：执行最终清理或日志记录。
- 示例：
javascript unmounted() { console.log('unmounted: 组件已卸载') } - 注意：此时无法访问 DOM，适合执行非 DOM 相关操作。
组合式 API 中的生命周期钩子
在 Vue3 的组合式 API 中，生命周期钩子以 on 前缀的函数形式提供，需从 vue 导入。这些函数在 setup() 或 <script setup> 中调用，映射关系如下：
| Options API 钩子 | 组合式 API 等效函数 |
|---|---|
beforeCreate | 不需要（直接在 setup 中） |
created | 不需要（直接在 setup 中） |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmounted | onUnmounted |
示例：
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const count = ref(0)
let timer
onMounted(() => {
timer = setInterval(() => {
count.value++
}, 1000)
})
onUnmounted(() => {
clearInterval(timer)
})
</script>
<template>
<div>Count: {{ count }}</div>
</template>其他生命周期钩子
Vue3 还提供了一些额外的生命周期钩子，适用于特定场景：
activated/deactivated：用于<KeepAlive>缓存的组件，分别在组件激活和失活时触发。errorCaptured：捕获子组件的错误，适合错误处理。renderTracked/renderTriggered（仅组合式 API）：调试钩子，跟踪或触发渲染的依赖。
生命周期图示
以下是 Vue3 生命周期的简化流程：
beforeCreate → created → beforeMount → mounted
↓ (数据变化)
beforeUpdate → updated
↓ (组件销毁)
beforeUnmount → unmounted实践建议
- 初始化：在
created或setup中初始化数据或调用 API，避免在beforeCreate中操作。 - DOM 操作：在
mounted或onMounted中执行 DOM 操作，确保 DOM 已可用。 - 清理资源：在
beforeUnmount或onBeforeUnmount中清理定时器、事件监听器等，防止内存泄漏。 - 避免死循环：在
updated或watch中避免直接修改触发更新的数据。 - 调试：使用
renderTracked和renderTriggered调试复杂组件的渲染行为。
Vue3 与 Vue2 的差异
- 命名调整：Vue2 的
beforeDestroy和destroyed改为beforeUnmount和unmounted，更符合挂载/卸载的语义。 - 组合式 API：Vue3 引入
onMounted等函数，支持函数式编程风格。 - 性能优化：Vue3 的响应式系统和渲染机制更高效，生命周期钩子的执行更轻量。
总结
Vue3 生命周期钩子是组件开发的核心机制，允许开发者在组件的不同阶段插入自定义逻辑。Options API 使用传统的钩子函数，组合式 API 使用 on 前缀的函数，两者功能等效。合理使用生命周期钩子可以提升代码的模块化和可维护性，特别适合处理初始化、DOM 操作和资源清理等任务。