Vue Composition API怎么在 setup 中编写生命周期钩子函数-Vue.js-PHP中文网

vue composition api 中生命周期钩子需导入 onxxx 函数并在 setup 中同步调用，如 onmounted、onunmounted；setup 本身替代 created，dom 相关操作须在 onmounted 中执行。

vue composition api怎么在 setup 中编写生命周期钩子函数

在 Vue Composition API 中，生命周期钩子函数不能像 Options API 那样直接写成对象属性，而是通过 导入对应的 onXxx 函数，在 setup() 中调用并传入回调函数来注册。

常用生命周期钩子的对应写法

Vue 3 的 Composition API 将生命周期钩子统一为以 on 开头的函数，需从 vue 中显式导入：

onBeforeMount → 替代 Options API 中的 beforeMount
onMounted → 替代 mounted
onBeforeUpdate → 替代 beforeUpdate
onUpdated → 替代 updated
onBeforeUnmount → 替代 beforeUnmount（Vue 2 中叫 beforeDestroy）
onUnmounted → 替代 unmounted（Vue 2 中叫 destroyed）
还有 onActivated、onDeactivated（用于 <keep-alive></keep-alive> 组件）

在 setup 中正确调用示例

必须在 setup() 同步执行时调用这些函数（不能放在异步回调或条件语句中），否则会失效：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

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

export default defineComponent({
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
      // 可发起请求、初始化第三方库等
    })

    onUnmounted(() => {
      console.log('组件即将卸载')
      // 清理定时器、事件监听、WebSocket 连接等
    })

    return {}
  }
})

注意作用域与响应式配合

生命周期回调中可以安全访问 setup 中定义的响应式数据和方法，因为它们处于同一作用域：

如果在 onMounted 中需要修改 ref 或 reactive 数据，直接操作即可
若需在 onUnmounted 中清理副作用（如 setTimeout 或 addEventListener），建议把相关引用（如 timer ID）也声明在 setup 顶层，确保能被清理函数访问到