Vue 3 中如何使用 Composition API 在组件之间共享逻辑？

Vue 3 中如何使用 Composition API 在组件之间共享逻辑？

回答：
在 Vue 3 中，可以使用 Composition API 中的自定义组合函数（Composable Functions）来在组件之间共享逻辑。这些函数通常以 use 开头（如 useMouse、useFetch），封装了响应式状态、计算属性、侦听器和方法，并通过 return 暴露给组件使用。

示例：

// 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++
  }

  return { count, double, increment }
}

<!-- MyComponent.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
    <button @click="increment">+</button>
  </div>
</template>

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

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

解析：

• Composition API 提供了更灵活的逻辑组织方式，相比 Options API 更易于复用和测试。
• 自定义组合函数利用了 Vue 3 的响应式系统（ref、reactive、computed 等），可在多个组件中导入并使用，实现逻辑复用。
• 这种模式类似于 React 中的自定义 Hook，但基于 Vue 的响应式机制，无需依赖调用顺序。
• 组合函数应避免直接操作 DOM 或依赖组件实例（如 this），以确保可复用性和可测试性。