Vue 3 组合式 API 深入：从 setup 到 composable 的函数式编程范式

一、组合式 API 解决了什么问题

Vue 2 的 Options API 按"data、methods、computed、watch"组织代码——看起来清晰，但当组件超过 300 行时，同一个业务逻辑的数据、方法、监听器分散在文件的不同位置，修改一个功能需要在 4 个位置之间来回跳。组合式 API 按"功能关注点"组织代码——一个功能的全部相关代码可以放在一起。

更重要的是 composable——可组合函数。它让你像搭积木一样把不同组件的共享逻辑抽离为独立函数，在需要的组件中按需引入。Vue 的生态正在全面拥抱这种模式。

二、Composable 的设计原则

一）单一职责

每个 composable 应该只做一件事。`useMousePosition()` 只管鼠标位置的追踪，不关心页面滚动。`useFetch()` 只管数据获取和状态管理，不关心数据怎么展示。

二）响应式数据的正确理解

ref 和 reactive 的区别是常见误区：ref 包装任意类型的值为响应式引用——适用于基本类型；reactive 只接受对象并将整个对象深层响应化。简单规则：基本类型用 ref，对象也推荐用 ref——它的 `.value` 语法在解构和传参时更可靠。

三、Vite 构建的全流程

Vite 利用浏览器原生 ES Module 来做开发时热更新——不再需要像 Webpack 一样把所有文件打包成一个 Bundle 再启动。首次启动时间从几十秒降到几百毫秒，这是开发体验巨大的代际提升。