Vue 3 组合式 API 实战技巧

Vue 3 引入的组合式 API（Composition API）为组件逻辑的组织和复用提供了全新方式。

为什么需要组合式 API

相比 Options API，Composition API 允许我们按功能而非选项类型来组织代码，使得相关逻辑更加内聚。

当组件变得复杂时，数据、方法、监听器和生命周期常常分散在不同选项里。组合式 API 可以把同一业务能力放在一起，阅读和维护都会更顺。

从选项到功能

过去我们常按 data、methods、computed 拆代码。现在可以按搜索、分页、权限、表单校验等功能拆分代码。

响应式数据与派生状态

关键特性包括 ref 和 reactive 创建响应式数据、computed 计算属性、watch 和 watchEffect 侦听数据变化。

ref 适合基本类型和明确的单值状态，reactive 更适合组织对象状态。computed 用来表达可缓存的派生数据，watch 则适合处理副作用。

watch 与 watchEffect

watch 更强调“监听谁”，watchEffect 更强调“依赖什么就自动追踪什么”。在业务代码里，明确依赖关系通常更容易长期维护。

Composables 的复用方式

通过自定义组合函数（Composables），我们可以将组件逻辑提取为可复用的函数，在不同组件之间共享状态和行为。

一个好的 Composable 应该命名清楚、返回值稳定，并尽量少依赖组件内部上下文。这样它既能被页面复用，也方便单独测试。

实战建议

把网络请求、表单状态、浏览器事件、权限判断拆成小的组合函数。每个函数只解决一个问题，组合起来就是完整页面逻辑。