Vue.js生命周期钩子在CompositionAPI中Setup函数对照-Vue.js-PHP中文网

setup()不是生命周期钩子，而是组件初始化最先执行的函数；生命周期需导入onmounted等函数在setup内调用，对应beforemount、mounted等，且无this，不能直接替代beforecreate和created。

vue.js生命周期钩子在compositionapi中setup函数对照

在 Vue 3 的 Composition API 中，setup() 函数本身并不是一个生命周期钩子，而是组件初始化时最先执行的函数。真正的生命周期钩子需要通过 导入对应的函数 并在 setup() 内调用，才能实现与 Options API 中生命周期等效的行为。

setup() 与 Options API 生命周期的对应关系

setup() 执行时机早于 beforeCreate 和 created，它内部没有 this，不能访问 data、methods、computed 等选项式属性。所有逻辑需依赖显式导入的 API：

onBeforeMount ≈ Options API 中的 beforeMount
onMounted ≈ mounted
onBeforeUpdate ≈ beforeUpdate
onUpdated ≈ updated
onBeforeUnmount ≈ beforeUnmount（Vue 3 新增，替代 beforeDestroy）
onUnmounted ≈ unmounted（替代 destroyed）
onActivated / onDeactivated ≈ activated / deactivated（仅用于 <keep-alive></keep-alive> 包裹的组件）
onErrorCaptured ≈ errorCaptured

如何在 setup 中正确使用生命周期钩子

所有生命周期函数都需从 vue 显式导入，并在 setup() 内作为普通函数调用：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

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

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })

    onUpdated(() => {
      console.log('组件视图已更新')
    })

    onUnmounted(() => {
      console.log('组件已卸载，适合清理定时器、事件监听等')
    })

    return {}
  }
}

注意：这些钩子会自动绑定当前组件实例的生命周期，无需手动管理执行时机。