setup 函数总结

核心概念

setup 是 Vue 3 组合式 API 的入口函数，在组件实例创建之前执行，用于定义组件的所有逻辑。

关键特点

1. 执行时机

• 最先执行（在 beforeCreate 之前）

• 此时无法访问 this，组件实例还未创建

2. 单向访问关系

• ✅ Options API 可以访问 setup 返回的内容

• ❌ setup 无法访问 Options API 的内容

• 同名冲突时，setup 优先级更高

3. 响应式数据

// ❌ 错误：普通变量不是响应式的
let name = '张三'// ✅ 正确：使用 ref/reactive 创建响应式
const name = ref('张三')
const user = reactive({ name: '张三' })

4. 必须返回值

setup() {const name = ref('张三')return { name }  // 模板才能使用
}

与 Options API 对比

| 特性 | Options API | setup 函数 |

|------|-------------|------------|

| 组织方式 | 按类型分组（data/methods/computed） | 按功能分组 |

| 响应式 | 自动响应式 | 需要显式创建（ref/reactive） |

| 类型支持 | 一般 | 优秀 |

| 逻辑复用 | 困难（mixin） | 简单（组合函数） |

| 学习曲线 | 简单 | 中等 |

实际应用

• 小型项目：Options API 足够

• 中大型项目：推荐 setup + 组合函数

• TypeScript 项目：setup 优势明显

一句话总结：setup 是 Vue 3 的"逻辑容器"，让组件逻辑更灵活、更易复用，但需要手动管理响应式。