用了组合式 (Composition) API 后代码变得更乱了，怎么办？

用了组合式 (Composition) API 后代码变得更乱了，怎么办？

Vue 3的组合式API因其高度的灵活性而广受欢迎，但这种灵活性也带来了代码组织上的挑战。本文将分享如何在使用组合式API时保持代码的清晰和可维护性，通过实际案例展示从混乱到有序的优化过程。

选项式API vs 组合式API

Vue 2的选项式API通过固定的代码结构（如data、methods等）确保了代码的一致性，但当组件逻辑变得复杂时，这种结构显得过于僵化。Vue 3引入的组合式API则提供了更大的灵活性，允许开发者根据需要自由组织代码。

随意使用组合式API带来的问题

虽然组合式API非常灵活，但如果没有良好的组织方式，代码很容易变得混乱。例如，随着项目的迭代，原本整齐的代码可能演变成各种响应式变量、计算属性和方法的混合体，如下图所示：

有序组织组合式API

为了解决上述问题，可以采用以下策略：

1. 将同类型的API代码集中在一起，如所有props、emits、computed等
2. 按照约定的顺序组织代码块

然而，当组件逻辑进一步复杂化时，这种组织方式仍然可能导致代码量过大，查找相关逻辑变得困难。

最佳实践：模块化与局部复用

一个更优的解决方案是将相关逻辑封装成独立的函数，但这些函数仍然保留在当前组件内部。例如，可以将与count相关的逻辑封装成useCount函数：

function useCount() {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  const increment = () => {
    count.value++
  }
  return {
    count,
    doubleCount,
    increment
  }
}

这种方法有以下优势：

• 如果某个逻辑需要在其他组件中复用，可以直接将其提取到独立的hooks文件中
• 查看特定业务逻辑时，只需关注对应的useXXX函数，无需在大量代码中查找

总结

使用组合式API的最佳实践包括：

1. 遵循约定的代码组织规范
2. 对可复用的逻辑进行模块化封装
3. 将不能复用的逻辑封装为组件内部的useXXX函数

通过这些方法，可以确保代码既保持灵活性，又易于维护和理解。