#Composition API

更好的代码组织方式

#优势

• 按逻辑聚合：相同业务代码放一起，不再被 options 拆散
• 极致复用：抽取为 Composable 函数（Hooks），替代 Mixins
• TypeScript：天然友好
• Tree Shaking：按需引入，包体积小

#setup 参数

#props

响应式对象。解构会失去响应式：

// 错误
const { title } = props

// 正确
const { title } = toRefs(props)

#context

普通对象，可以解构。包含：attrs、slots、emit、expose

#script setup

Vue 3 推荐写法，更简洁：

const props = defineProps(['foo'])
const emit = defineEmits(['change'])
const slot = useSlots()
const attr = useAttrs()
defineExpose({ ... })

#为什么没有 this？

setup 执行时机在 beforeCreate 之前，实例还没创建好。Vue 刻意去掉 this，强制用参数传递。