setup 是 Vue 3 组合式 API 的核心入口，在组件实例创建前执行，接收 props（响应式）和 context（含 attrs、slots、emit）参数，需返回对象供模板使用；通过 ref 和 reactive 声明响应式状态，用 use 开头函数封装可复用逻辑，配合 onMounted 等生命周期钩子及 watch 实现灵活响应式开发。
setup 函数是 Vue 3 组合式 API 的核心入口，它在组件实例创建前执行，让你能集中声明响应式状态、计算属性、方法和生命周期钩子，按逻辑关系组织代码，而不是按选项类型（如 data、methods）硬性分割。
setup 的基本结构和参数
setup 是一个函数，接收两个参数：props 和 context。props 是响应式对象，父组件传入的属性更新时会自动同步；context 是普通对象，提供 attrs、slots、emit 等上下文能力。注意：setup 中没有 this，也不能访问 data、computed 或 methods 等选项式 API 的字段。
- props 必须通过解构或直接访问获取，不可用 ...props 展开（会失去响应性）
- context.emit 可用于触发自定义事件，替代 this.$emit
- setup 必须返回一个对象，其属性才能在模板中直接使用
声明响应式状态：ref 与 reactive
响应式数据需显式创建。ref 适合基础类型（数字、字符串、布尔值），返回带 .value 属性的对象；reactive 适合对象或数组，返回代理对象，直接操作属性即可。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用 ref 声明 count = ref(0)，模板中 {{ count }} 自动解包，脚本中需 count.value 修改
- 用 reactive 声明 state = reactive({ name: 'Vue', list: [] })，可直接 state.name = 'Vue 3'
- 避免混合使用：不要对 ref.value 赋值为 reactive 对象，也不要把 ref 当作 reactive 的属性用
组合逻辑：提取可复用的函数
把关联的响应式数据、方法和副作用封装成独立函数（常以 use 开头），实现逻辑复用。例如 useCounter、useFetch、useForm。
立即学习“前端免费学习笔记（深入）”；
- 函数内部调用 ref、computed、onMounted 等组合式 API
- 返回一个包含响应式变量和操作函数的对象
- 在 setup 中解构使用：const { count, increment } = useCounter()
- 多个组合函数可共存，互不干扰，比如同时 useCounter() 和 useDarkMode()
接入生命周期与副作用
组合式 API 提供了 onXxx 钩子（如 onMounted、onUpdated、onUnmounted），它们必须在 setup 内同步调用，且只能在当前组件作用域生效。
- onMounted(() => console.log('mounted')) 替代 beforeCreate + created + mounted 的组合
- watch 和 watchEffect 用于侦听响应式源，比 Options API 的 watch 更灵活、更易控制
- 副作用（如定时器、事件监听）应在 onUnmounted 中清理，避免内存泄漏
