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 操作和资源清理等任务。