Vue 3 组合式 API 的五个常见误用

组合式 API 上手不难，但项目里几个误用会直接影响可维护性。

一、把所有逻辑写进一个 setup

组合式 API 的初衷是可组合。如果一个文件里写了几百行 setup，只是把选项式换了个写法，没有获得任何好处。应该按业务维度拆成多个 useXxx。

二、无差别使用 ref

ref 适合基本类型，reactive 适合对象。混用会出现「解构后失去响应」的隐阱。需要解构时用 toRefs，或者干脆用 ref 包对象。

三、在计算属性里做副作用

computed 应当只做推导，不应在里面请求接口或改其他状态。需要副作用时用 watch，且注意 immediate 与 deep 的默认值差异。

四、监听对象却不加 deep

watch 一个对象默认不监听内部属性变化，很多人因此以为数据没更新。反过来，深层监听大对象又会带来性能开销，应该监听具体字段。

五、忽略清理函数

在 onMounted 里加的定时器、事件监听、订阅，必须在 onUnmounted 里清除。不然页面切换后旧逻辑还在跑。