还记得在Vue 2的日子里，我们是如何复用状态逻辑的吗？mixins？它就像一盒不知道来源的巧克力，你永远不知道下一个属性名冲突会在哪里爆发。或者高阶组件？它们常常带来不必要的包装地狱，让组件树变得臃肿不堪。
Vue 3的Composition API，特别是Composables，正是为了优雅地解决这些问题而生。
什么是Composables？
简单来说，它就是一个利用Vue 3的ref、computed、onMounted等响应式API，将可复用的状态逻辑“组合”到一个函数中的模式。你可以把它想象成一个自带响应式能力的、高度可定制的自定义Hook。
一个简单的例子：useCounter
让我们创建一个经典的计数器逻辑：
// useCounter.js
import {
ref } from 'vue';
export function useCounter(initialValue = 0) {
const count = ref(initialValue);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => count.value = initialValue;
return {
count, increment, decrement, reset };
}
现在，在任何组件中，你都可以像这样使用它：
<template>
<div>
<p>当前计数：{
{ count }}</p>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<button @click="reset">重置</button>
</div>
</template>
<script setup>
import { useCounter } from './useCounter';
const { count, increment, decrement, reset } = useCounter(10); // 从10开始
</script>
Composables的优势何在？
- 逻辑清晰：所有相关的状态和方法都聚集在一起，代码更易于理解和维护。
- 无命名冲突：得益于解构赋值，返回的变量名可以随意重命名，彻底告别
mixins的隐式冲突。 - 类型推导友好：对TypeScript的支持极佳，能提供完美的类型推断。
- 灵活组合：你可以在一个组件内组合多个Composables，构建出复杂而清晰的数据流。
拥抱未来
从mixins到Composables，不仅仅是API的升级，更是前端工程思想的一次进化。它鼓励我们将关注点分离，构建出更健壮、更可测试的代码。
是时候在你的下一个Vue 3项目中，尝试一下Composables的魅力了！
这篇文章共计约450字，聚焦于一个具体的前端技术点，并提供了代码示例，符合技术博客的风格。
