Vue3 Composition API 的优势与逻辑复用实践是什么？

Composition API 是 Vue3 引进的关键革新，在代码组织、灵活性及性能等方面带来显著优势，逻辑复用作为其核心实践，解决了 Vue2 时代 Options API 中的痛点。

Composition API 的核心优势

1. 逻辑组织更清晰灵活
   Composition API 通过 setup 函数将所有逻辑代码按功能模块聚合，而非分散在 data 、 methods 和 computed 等片段中。这种方式解决 Options API 的碎片化问题（如将一个功能的代码拆分到多个选项），提升可读性。
   例如，一个计时器功能完全在 setup 函数中定义：

export default {
  setup() {
    // 逻辑代码直接聚合
    const count = ref(0);
    const increment = () => { count.value++; };
    return { count, increment };
  }
}

1. 逻辑复用的革命性改进
   传统 mixins 容易引发命名冲突和依赖混乱。Composition API 允许将相关逻辑封装成纯 JavaScript 组合式函数（Composables），直接在其他组件中导入重用。
   例如定义一个可复用的计数器逻辑：

function useCounter() {
  const count = ref(0);
  const increment = () => { count.value++; };
  return { count, increment }; // 暴露所需属性和方法
}

在组件中直接使用：

<script setup>
import { useCounter } from './counterUtils'; // 导入组合函数
const { count, increment } = useCounter();
</script>

1. 更好的 TypeScript 支持
   Composition API 的响应式工具如 ref 与 reactive 提供清晰的类型推断输入输出，避免 Option API 的类型混淆问题。结合 TypeScript 开发效率大幅提升。

2. 性能优化潜力
   通过更细粒度的依赖追踪和代码组织，支持更好的懒加载及轻量虚拟 DOM，减少不必要的组件重渲染，应用速度提升。

3. 更直观的调试和维护
   逻辑分离后测试和调试更简单独立。

逻辑复用实践

1. 设计与封装组合式函数
   • 函数应专注于单一功能（如数据获取、交互逻辑）。
   • 使用 ref / reactive 创建私有状态，computed 与 watch 管理响应式计算。
   • 仅 return 组件需要的方法属性。

   例如，抽离一个通用的 fetch 功能：

// fetchUtils.js
import { ref } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);

  const fetchData = async () => {
    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    }
  };

  return { data, error, fetchData };
}

1. 在组件中应用复用
   结合 <script setup> 语法和 setup 函数快速集成：

<!-- UserComponent.vue -->
<script setup>
import { useFetch } from './fetchUtils'; // 快速导入重用
const { data, error, fetchData } = useFetch('https://api.example.com/users');
onMounted(() => fetchData()); // 自动调用获取初始化数据
</script>

1. 处理副作用与调试
   在组合函数中利用 watchEffect 清理未及时移除的副作用，并使用调试钩子分析复杂逻辑链。

通过此实践，大型项目实现模块高度复用，减少代码冗余和维护负担。