Vue 组合式函数与 Class API 对比

Vue 官方从未提供“Class API”，它仅是社区对 Vue 2 的封装尝试（如 vue-class-component），本质仍是选项式 API 的语法糖；组合式函数才是 Vue 3 官方推荐的逻辑复用机制，基于函数调用、响应式 API 和生命周期钩子，支持逻辑聚合、零耦合复用、强类型推导与高可测试性。

Vue 中没有官方定义的 “Class API” —— 这是一个常见误解。Vue 官方从未提供基于 ES6 class 的组件编写方式（如 class MyComponent extends Vue），也未将其作为正式 API 支持。所谓 “Class API”，通常指社区早期尝试或第三方插件（如 vue-class-component）对 Vue 2 的封装，它本质上仍是选项式 API 的语法糖，并非 Vue 原生能力。

组合式函数不是 Class API 的替代品

组合式函数（Composables）是 Vue 3 组合式 API 生态中的核心复用机制，用于封装**带状态、带副作用、可跨组件复用的逻辑**（如 useMouse()、useFetch()）。它不依赖类实例，也不需要继承，而是基于函数调用 + 响应式 API + 生命周期钩子的自然组合。

Class API（如果存在）则试图把组件逻辑塞进 class 的 constructor/methods 中，仍需手动绑定 this、处理响应式、桥接生命周期——既增加心智负担，又无法真正解耦逻辑。

组合式函数的核心优势在于逻辑聚合与零耦合复用

• 按功能组织，而非按类型：鼠标跟踪、表单验证、权限检查等完整闭环逻辑可独立成一个函数，内部自管 ref、watch、onMounted 等，外部只消费返回值
• 无命名冲突，无隐式 this：每个调用都产生全新作用域，多个 useCounter() 可共存于同一组件，互不影响
• 天然支持 TypeScript 类型推导：返回对象结构明确，IDE 能精准提示 x.value、update() 等成员，class 方式常因装饰器或 this 绑定导致类型丢失
• 可测试性高：函数本身无副作用（副作用由 onMounted/onUnmounted 管理），可直接导入单元测试，无需模拟组件实例

为什么不该拿组合式函数和 Class API 对比

Class API 不是 Vue 的演进方向，Vue 官方文档、RFC 和维护策略中均未将其列为选项。Vue 3 明确推荐组合式 API（尤其 <script setup>）作为默认开发模式；而 Class API 插件已停止维护，且在 Vue 3 中无法原生工作。

立即学习“前端免费学习笔记（深入）”；

真正值得对比的是：组合式函数 vs Mixins（选项式 API 的复用方案） 或 组合式 API vs 选项式 API。前者解决逻辑复用的污染与溯源问题，后者解决代码组织与可维护性问题。

简单说：组合式函数是 Vue 官方认可、生态完善、面向未来的复用范式；所谓 Class API 是一段历史插曲，不具备比较价值。