Vue 3 中如何使用 Composition API 实现组件间的逻辑复用？

Vue 3 中如何使用 Composition API 实现组件间的逻辑复用？

回答：
在 Vue 3 中，可以通过自定义组合式函数（Composable Functions）来实现组件间的逻辑复用。这些函数通常以 use 开头（如 useMouse、useFetch），内部使用 ref、reactive、computed、watch 等响应式 API 封装特定逻辑，并返回需要暴露给组件的状态或方法。

示例：

// composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const double = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  function reset() {
    count.value = initialValue
  }

  return { count, double, increment, reset }
}

在组件中使用：

<!-- MyComponent.vue -->
<script setup>
import { useCounter } from '@/composables/useCounter'

const { count, double, increment, reset } = useCounter(10)
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
    <button @click="increment">+</button>
    <button @click="reset">Reset</button>
  </div>
</template>

解析：

• Composition API 的核心优势之一是逻辑复用能力，相比 Vue 2 的 mixins，composables 更清晰、无命名冲突、类型推导友好（尤其在 TypeScript 中）。
• 自定义组合函数本质上是普通 JavaScript 函数，但依赖 Vue 的响应式系统，因此必须在 setup() 或 <script setup> 中调用（即在组件上下文内）。
• 多个组件可以复用同一个 composable，每个实例拥有独立的状态（因为每次调用都会创建新的 ref 和响应式对象）。
• 这种模式类似于 React 中的自定义 Hook，是现代前端框架中逻辑复用的主流方式。