Vue 3 中如何使用 Composition API 在组件之间共享逻辑？请举例说明。

Vue 3 中如何使用 Composition API 在组件之间共享逻辑？请举例说明。

回答：
在 Vue 3 中，可以使用 Composition API 中的自定义组合函数（Composable）来在组件之间共享逻辑。通过将响应式状态、计算属性、方法等封装到一个函数中，并在多个组件中调用该函数，即可实现逻辑复用。

示例：

1. 创建一个可复用的组合函数 useCounter.js：

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

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

  function increment() {
    count.value++;
  }

  function reset() {
    count.value = initialValue;
  }

  return {
    count,
    doubleCount,
    increment,
    reset
  };
}

2. 在组件中使用该组合函数：

<!-- CounterComponent.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">+</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script setup>
import { useCounter } from '@/composables/useCounter';

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

解析：

• Composition API 的核心思想是按逻辑关注点组织代码，而不是像 Options API 那样按选项（data、methods 等）组织。
• 自定义组合函数（如 useCounter）类似于 React 中的自定义 Hook，能有效提取和复用跨组件的逻辑。
• 每次调用 useCounter 都会创建独立的响应式状态，避免组件间状态污染。
• 这种方式比混入（mixins）更清晰、类型推导更好（尤其配合 TypeScript），且不会造成命名冲突。

因此，Composition API 提供了一种强大而灵活的机制来实现前端逻辑的模块化与复用。