生命周期钩子概述

生命周期钩子是在 Vue 组件各个关键阶段调用的特殊函数，允许开发者在特定时刻执行自定义逻辑。

生命周期阶段划分

Vue 3 组件的生命周期可分为四个主要阶段：

1. 创建阶段 - 组件实例化与响应式系统初始化
2. 挂载阶段 - 组件模板编译与 DOM 挂载
3. 更新阶段 - 响应式数据变化与 DOM 更新
4. 卸载阶段 - 组件销毁与资源清理

生命周期执行流程

组件创建
    ↓
setup() 执行
    ↓
onBeforeMount() → 模板编译完成，挂载前
    ↓
onMounted() → 组件已挂载，可访问 DOM
    ↓
onBeforeUpdate() → 数据变更，DOM 更新前
    ↓  
onUpdated() → DOM 更新完成
    ↓
onBeforeUnmount() → 组件卸载前，资源清理
    ↓
onUnmounted() → 组件已卸载

核心生命周期钩子

创建阶段

setup() - Composition API 入口

import { ref, reactive } from 'vue'

export default {
  setup() {
    // 初始化响应式数据
    const count = ref(0)
    const state = reactive({ message: 'Hello' })
    
    // 返回模板中可用的数据和方法
    return { count, state }
  }
}

• 执行时机：组件实例创建之初
• 主要用途：定义响应式数据、计算属性、方法等
• 注意事项：此阶段无法访问组件实例（this）

挂载阶段

onBeforeMount() - 挂载前回调

import { onBeforeMount } from 'vue'

setup() {
  onBeforeMount(() => {
    console.log('组件即将挂载到 DOM')
    // 此时模板已编译，但尚未挂载
  })
}

onMounted() - 挂载完成回调

import { onMounted, ref } from 'vue'

setup() {
  const container = ref(null)
  
  onMounted(() => {
    console.log('组件已挂载到 DOM')
    // 可访问 DOM 元素
    console.log(container.value)
    // 适合初始化第三方库、发起数据请求
    initializeThirdPartyLibrary()
  })
  
  return { container }
}

更新阶段

onBeforeUpdate() - 更新前回调

import { onBeforeUpdate } from 'vue'

setup() {
  onBeforeUpdate(() => {
    console.log('数据已变更，DOM 即将更新')
    // 可获取更新前的 DOM 状态
  })
}

onUpdated() - 更新完成回调

import { onUpdated } from 'vue'

setup() {
  onUpdated(() => {
    console.log('DOM 更新已完成')
    // 可执行依赖于新 DOM 的操作
  })
}

卸载阶段

onBeforeUnmount() - 卸载前回调

import { onBeforeUnmount } from 'vue'

setup() {
  let timerId = null
  
  onBeforeUnmount(() => {
    console.log('组件即将卸载')
    // 清理资源：定时器、事件监听器、网络请求等
    if (timerId) clearInterval(timerId)
    window.removeEventListener('resize', handleResize)
  })
}

onUnmounted() - 卸载完成回调

import { onUnmounted } from 'vue'

setup() {
  onUnmounted(() => {
    console.log('组件已完全卸载')
    // 执行最终清理工作
  })
}

总结

Vue 3 的生命周期钩子为开发者提供了精确控制组件行为的能力：

• 创建阶段：使用 setup() 初始化组件状态
• 挂载阶段：在 onMounted 中执行 DOM 操作和数据初始化
• 更新阶段：通过 onBeforeUpdate 和 onUpdated 响应数据变化
• 卸载阶段：在 onBeforeUnmount 中确保资源正确释放

掌握这些生命周期钩子的正确使用方法，能够帮助开发者构建出更加稳定、高效的 Vue 应用程序。