Vue Composition API 中生命周期钩子需从 vue 导入并在 顶层调用，如 onMounted、onUnmounted；setup 本身替代了 created 和 beforeCreate，无需额外钩子；需避免在 onUpdated 中修改响应式数据或在 onUnmounted 中访问已销毁 DOM。
Vue 的生命周期在 Composition API 中通过 组合式函数（如 onMounted、onUnmounted 等）调用，不再依赖 mounted() 这类选项式写法；setup 语法糖（<script setup></script>）让这些钩子用起来更简洁，无需手动返回，也无需定义 setup() 函数。
常用生命周期钩子怎么写？
在 <script setup></script> 中，直接从 vue 导入对应钩子并调用即可。它们会自动绑定到当前组件实例的生命周期阶段：
-
onBeforeMount：模板编译完成、首次挂载前执行 -
onMounted：DOM 渲染完成，可安全操作元素（如ref获取的 DOM） -
onBeforeUpdate：响应式数据变化后、DOM 更新前触发 -
onUpdated：DOM 更新完成后执行（慎用，避免无限循环） -
onBeforeUnmount：组件卸载前，适合清理定时器、事件监听、订阅等 -
onUnmounted：组件已完全销毁，DOM 已移除
和 ref / reactive 配合操作 DOM
生命周期钩子常配合响应式引用使用。比如需要在挂载后聚焦输入框：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
<script setup>
import { ref, onMounted } from 'vue'
const inputRef = ref(null)
onMounted(() => {
inputRef.value?.focus() // 安全调用 focus()
})
</script>
<template>
<input ref="inputRef" type="text" />
</template>
注意：没有 created 和 beforeCreate
Composition API 中，setup() 本身就在组件创建之后、初始化之前执行，相当于融合了选项式中的 beforeCreate 和 created。因此：
立即学习“前端免费学习笔记（深入）”；
- 响应式数据声明（
ref、reactive）、计算属性（computed）、侦听器（watch）都写在setup顶层，即“逻辑执行位置” - 不需要额外钩子模拟
created；想在数据初始化后立刻做点事，直接写在setup里就行 - 如果依赖 props 或 emit，确保在
onMounted之后再使用（因为setup执行时 props 已可用，但 DOM 尚未就绪）
错误写法避坑
以下写法容易出错，需留意：
- 在
onUpdated中修改响应式数据 → 可能触发再次更新，造成死循环 - 在
onUnmounted中访问ref的value→ 此时 DOM 已销毁，ref.value可能为null或undefined - 把钩子写在
if或循环中 → 生命周期钩子必须在setup顶层同步调用，否则 Vue 无法正确注册 - 忘记导入钩子 → 比如用了
onMounted却没import { onMounted } from 'vue'，会报 undefined 错误
