Vue 3 的 Composition API 到底香不香？用了一年的真实感受

从 Options 到 Composition：一次"被迫"的升级

兄弟们，2022年了，Vue 3 都出这么久了，你还在用 Options API 写 data()、methods、computed 老三样吗？老实说，我刚接触 Composition API 的时候，内心是拒绝的——"我 Options API 用了好几年，不也挺好的吗？干嘛非要学你那个 setup？"

结果项目一接手，同事写的 Vue 3 代码直接把我看傻了。一个组件几百行，所有逻辑堆在一起，跟 spaghetti 似的。我问："这写的啥？"他说："Composition API 啊，自由！" 我："自由到放飞自我是吧？"

ref vs reactive：选择困难症患者的噩梦

先说说 ref 和 reactive 这对双胞胎。一个用 .value，一个不用。我就问你，写代码的时候你是不是常常忘记加 .value？反正我前三个月每天都在给 .value 擦屁股。

// 你以为是这样的
const count = ref(0)
count++ // 崩了，兄弟

// 实际得这样
count.value++ // 对味了

你说烦不烦？Vue 团队说："没事，用 reactive 就不用 .value 了。" 好家伙，我换成 reactive，结果解构出来又失去响应性了——toRefs 了解一下？算了，毁灭吧。

useXxx：真香定律虽迟但到

但是！用了一段时间之后，我不得不承认——真香。

最爽的是自定义 hooks。以前 Options API 混入 mixin，命名冲突了都不知道找谁哭去。现在写个 useMouseTracker、useDebounce、useApi，想在哪用在哪用，清爽得像夏天喝了冰可乐。

// 感受一下这个清爽度
const { x, y } = useMouseTracker()
const { data, loading } = useApi('/api/users')
const { search, results } = useDebouncedSearch()

逻辑复用是真的优雅，代码量直接少了三分之一。而且 TypeScript 支持好到爆，类型推导嗖嗖的。

我的结论

Composition API 好不好？好，但前提是你会组织代码。要是你一股脑把所有逻辑塞到一个 setup 里，那还不如用 Options API。记住一个原则：按功能拆，不要按选项拆。把相关的东西放到一起，无关的拆成 hook。

最后送大家一句话：Options API 是教科书，Composition API 是工具箱。考试用教科书，干活用工具箱。选哪个，你心里有数了吧？