vue3的生命周期

初始化阶段

setup()

javascript 复制代码

setup(props, context) {
  // 组合式API的入口
  // 在beforeCreate之前调用
  // 不能访问this
}

setup()是Composition API的入口点，在组件实例创建之前执行，此时无法访问组件实例(this)。

beforeCreate (选项式API)

javascript 复制代码

beforeCreate() {
  // 实例初始化后，数据观测和事件配置之前调用
  // 此时data、methods等还未初始化
}

created (选项式API)

javascript 复制代码

created() {
  // 实例创建完成后调用
  // 可以访问data、methods等
  // 但尚未挂载DOM，$el不可用
}

挂载阶段

onBeforeMount (Composition API) / beforeMount (选项式API)

javascript 复制代码

// Composition API
import { onBeforeMount } from 'vue'
 
setup() {
  onBeforeMount(() => {
    // 挂载开始之前被调用
  })
}
 
// 选项式API
beforeMount() {
  // 类似上面
}

onMounted (Composition API) / mounted (选项式API)

javascript 复制代码

// Composition API
import { onMounted } from 'vue'
 
setup() {
  onMounted(() => {
    // 组件挂载完成后调用
    // 可以访问DOM元素
  })
}
 
// 选项式API
mounted() {
  // 类似上面
}

更新阶段

javascript 复制代码

onBeforeUpdate (Composition API) / beforeUpdate (选项式API)
// Composition API
import { onBeforeUpdate } from 'vue'
 
setup() {
  onBeforeUpdate(() => {
    // 数据变化导致DOM更新之前调用
  })
}
// 选项式API
beforeUpdate() {
  // 类似上面
}

onUpdated (Composition API) / updated (选项式API)

javascript 复制代码

// Composition API
import { onUpdated } from 'vue'
 
setup() {
  onUpdated(() => {
    // DOM更新完成后调用
    // 注意：避免在此修改状态，可能导致无限循环
  })
}
 
// 选项式API
updated() {
  // 类似上面
}

卸载阶段

onBeforeUnmount (Composition API) / beforeUnmount (选项式API)

javascript 复制代码

// Composition API
import { onBeforeUnmount } from 'vue'
 
setup() {
  onBeforeUnmount(() => {
    // 组件卸载之前调用
    // 适合清理定时器、取消事件监听等
  })
}
 
// 选项式API
beforeUnmount() {
  // 类似上面
}

onUnmounted (Composition API) / unmounted (选项式API)

javascript 复制代码

// Composition API
import { onUnmounted } from 'vue'
 
setup() {
  onUnmounted(() => {
    // 组件卸载后调用
  })
}
 
// 选项式API
unmounted() {
  // 类似上面
}

让我们通过构建一个简单的数字时钟组件，感受各个生命周期的魔法时刻

javascript 复制代码

javascript
 体验AI代码助手
 代码解读
复制代码
// 完整代码文件：CounterTimer.vue
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    let timerId = null

    // 1. beforeCreate 替代方案 - 使用 ref 初始化前
    onBeforeMount(() => {
      console.log('准备开始挂载组件')
    })

    // 2. created 替代方案 - setup 执行时
    console.log('组件刚创建完成，count 初始值:', count.value)

    // 3. mounted 核心逻辑
    onMounted(() => {
      timerId = setInterval(() => {
        count.value += 1
      }, 1000)
      console.log('组件已挂载，开启计时器')
    })

    // 4. beforeUpdate 前置操作
    onBeforeUpdate(() => {
      console.log('检测到数据变更，旧值:', count.value)
    })

    // 5. updated 后置操作
    onUpdated(() => {
      console.log('数据更新完成，新值:', count.value)
    })

    // 6. unmounted 清理工作
    onUnmounted(() => {
      clearInterval(timerId)
      console.log('组件即将销毁，清除计时器')
    })

    return {
      count
    }
  }
}

这个组件会经历完整的生命周期流程：

初始化时打印 count 初始值
挂载后启动计时器
每次数值更新前后打印日志
销毁时清理定时器