Composition API：逻辑复用的快乐与痛苦

组合式 API：双刃剑

Composition API 是 Vue 3 的灵魂。它允许我们将逻辑通过 Hooks（Composables）的方式进行提取和复用。

理想很丰满

我想象中的代码：

const { user } = useUser()
const { articles } = useArticles()
const { loading } = useLoading()

清爽、干净、模块化。

现实很骨感

实际写出来的代码：

const { user, loading: userLoading, error: userError } = useUser()
const { articles, loading: articleLoading, error: articleError } = useArticles()
// 命名冲突！到处重命名！

而且，如果你把所有逻辑都堆在 setup 里，不加以拆分，它就会变成一个巨大的面条代码（Spaghetti Code），比 Options API 还要难以维护。因为 Options API 至少强制你分开了 data 和 methods。严格来说实际上只要你不在乎史山代码，你完全可以不在乎getter和setter，全放在utils里面，所有的state变量都塞在一个const里面。

令人头秃的细节

文档里写得轻描淡写，实际用起来坑巨多。比如那个 Hook 的执行时机，如果在 Hook 里面用了 onMounted，它到底是在父组件挂载前还是后？如果 Hook 里有异步操作呢？我之前是写C++这种顺序执行语言的，被这玩意狠狠的摆了一道，同一个函数内所有的调用是同步执行的，除非你用promise进行强行顺序化。