setup 是组合式逻辑的统一入口，作为 Vue 3 Composition API 的核心起点，在组件实例创建前执行，早于 data、methods 和生命周期钩子；需用 ref 或 reactive 声明响应式数据，封装组合式函数分组逻辑，通过 onXxx 函数注册生命周期，context.emit 替代 this.$emit，ref(null) 获取 DOM 元素。
setup 是组合式逻辑的统一入口
Vue 3 的 setup 函数是 Composition API 的核心起点，它在组件实例创建前执行，早于 data、methods 和生命周期钩子（如 created）。所有响应式状态、计算属性、方法和生命周期逻辑，都应在 setup 内定义并返回，供模板使用。
用 ref 和 reactive 声明响应式数据
在 setup 中不能直接写 data: () => ({ count: 0 })，而要借助响应式 API：
-
ref：适合基础类型（数字、字符串、布尔值），必须通过
.value读写，但在模板中可直接 {{ count }}（Vue 自动解包） - reactive：适合对象或嵌套结构，返回的是代理对象，直接操作属性即可，无需 .value
- 不推荐混合使用 —— ref 包裹对象易出错，reactive 不支持解构响应式，需谨慎选择
把相关逻辑分组封装成组合式函数
避免 setup 变成“万能大函数”。比如用户信息、表单校验、列表分页等，各自抽成独立函数：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 每个函数接收必要参数（如初始数据、配置项），内部用 ref/reactive/computed/watch 组织逻辑
- 返回一个对象，包含该功能所需的状态和方法
- 在 setup 中解构合并：
return { ...useUserInfo(), ...useFormValidation() }
正确使用生命周期钩子和上下文
setup 中无法访问 this，也不能直接调用 this.$emit 或 this.$refs。替代方式如下：
立即学习“前端免费学习笔记（深入）”；
- 用 onMounted、onUnmounted 等函数注册生命周期回调
- 通过第二个参数 context 获取
emit、slots、attrs；其中context.emit替代this.$emit - 需要访问 ref 元素时，用
const el = ref(null)声明，再在模板中绑定ref="el"
