#Composition API 详解

#1. 核心优势 (vs Options API)

#Composition API (组合式)

• 按逻辑聚合：相同的业务逻辑代码靠在一起，不再被 options 拆散。
• 极致复用：抽取为 Composable 函数（Hooks），替代 Mixins，无副作用。
• TypeScript：天然友好，类型推导能力极强。
• Tree Shaking：按需引入 API，包体积更小。

#Options API (选项式)

• 低门槛：data, methods 结构固定，新手容易理解 this。
• 直观：代码结构一目了然（但也限制了灵活性）。

#2. setup(props, context) 参数

setup 是 Composition API 的入口。

#(1) 参数 1: props (响应式)

• 特性：它是响应式的 Proxy 对象。
• 解构问题：const { title } = props 会让 title 失去响应式。
• 正确解构：
  • const { title } = toRefs(props)
  • const title = toRef(props, 'title')

#(2) 参数 2: context (普通对象)

• 特性：普通 JS 对象，可以解构。
• 包含属性：
  • attrs: 非 Prop 属性（class, style）。
  • slots: 插槽内容。
  • emit: 触发事件的方法。
  • expose: 暴露公共属性（Vue 3.2+）。

#3.<script setup> 语法糖

这是 Vue 3 推荐的写法，更简洁，无需 return。

• Props: const props = defineProps(['foo'])
• Emit: const emit = defineEmits(['change'])
• Slots: useSlots()
• Attrs: useAttrs()
• Expose: defineExpose({ ... })

#4. 常见问题

Q: 为什么 setup 里没有 this？ setup 执行时机在 beforeCreate 之前，组件实例还没完全创建好。 Vue 刻意屏蔽 this，为了防止开发者在 Composition API 中混用 Options API 的思维，强制使用参数传递或 Hook 获取。