Vue3 的生命周期钩子有哪些？和 Vue2 有什么变化？

Vue3 生命周期（Composition API）

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onActivated,
  onDeactivated
} from 'vue'

完整流程

挂载阶段：
  setup() → onBeforeMount → DOM 挂载 → onMounted

更新阶段：
  数据变化 → onBeforeUpdate → DOM 更新 → onUpdated

卸载阶段：
  onBeforeUnmount → onUnmounted

KeepAlive：
  onActivated（激活）/ onDeactivated（停用）

错误处理：
  onErrorCaptured

Vue2 vs Vue3 对比

Vue2 Vue3 (Composition API) 说明
beforeCreate setup() 已被 setup 取代
created setup() 已被 setup 取代
beforeMount onBeforeMount 挂载前
mounted onMounted 挂载后
beforeUpdate onBeforeUpdate 更新前
updated onUpdated 更新后
beforeDestroy onBeforeUnmount 卸载前（改名）
destroyed onUnmounted 卸载后（改名）
activated onActivated KeepAlive 激活
deactivated onDeactivated KeepAlive 停用
errorCaptured onErrorCaptured 错误捕获

使用示例

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const update = (e) => {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

关键变化

  1. beforeCreate / created → 直接在 setup() 中编写
  2. destroy 相关改名为 unmount（语义更准确）
  3. 生命周期函数在 setup 中同步调用
  4. 可以在同一组件中多次调用同一钩子：
onMounted(() => console.log('first'))
onMounted(() => console.log('second')) // ✅ 合法

新增钩子

同分类其他题目

›Vue3 Composition API 和 Options API 的区别？为什么要有 Composition API？›Vue3 中 ref 和 reactive 的区别？什么时候用哪个？›Vue3 响应式系统的原理是什么？和 Vue2 有什么区别？›Vue3 中 computed、watch、watchEffect 的区别？