13 个 Vue 组合式函数技巧，让你的代码更出色

原文链接：13 Vue Composables Tips That Make Your Code Better
作者：Michael N thiessen
译者：倔强青铜三

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

Vue 组合式函数功能强大，但如果不小心，它们可能会变得混乱且难以维护。本文介绍了 13 个技巧，帮助你编写更好、更易于维护的组合式函数。

这些技巧适用于从简单的状态管理解决方案到复杂的共享逻辑的各种场景，能帮助你：

避免导致代码混乱的常见陷阱
编写更易于测试和维护的组合式函数
创建更灵活、可复用的共享逻辑
逐步从选项式 API 迁移到组合式 API

以下是具体技巧：

1. 避免多层组件间传递 props

数据存储模式（Data Store Pattern）可避免在多个组件层之间传递 props 和事件。例如，父子组件间通过多层 prop drilling 和事件冒泡通信时，可创建一个共享数据存储，任何组件都可导入使用：

import { reactive, toRefs } from 'vue'
const state = reactive({ user: { name: 'Alice' } })
export function useUserStore() {
  return toRefs(state)
}

当兄弟组件或“堂兄弟”组件需要共享相同数据但没有直接连接时，也可使用此模式，避免数据在父组件中传递或状态重复。

2. 无关组件间共享数据

通过数据存储模式，无关组件可共享数据，无需直接连接。例如，两个兄弟组件需要相同的用户对象，可通过共享的组合式函数存储来实现：

// SiblingA.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

// SiblingB.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

3. 用清晰方法控制状态更新

数据存储模式鼓励提供清晰的方法来更新共享状态，而不是直接暴露整个响应式对象。例如：

import { reactive, readonly } from 'vue'
const state = reactive({ darkMode: false })
export function toggleDarkMode() {
  state.darkMode = !state.darkMode
}
export function useUserStore() {
  return {
    darkMode: readonly(state.darkMode),
    toggleDarkMode
  }
}

4. 将大型组件拆分为小函数

内联组合式函数模式（Inline Composables Pattern）通过将相关状态和逻辑组合到小函数中，来拆分大型组件。例如，一个巨大的组件可能将所有 refs 和方法放在一起，而内联组合式函数可将逻辑分组并本地提供，之后可提取到单独文件：

<script setup>
function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}
const { count, increment } = useCounter()
</script>

5. 将业务逻辑与 Vue 响应式分离

薄组合式函数模式（Thin Composables Pattern）建议将原始业务逻辑与 Vue 响应式分离，以便测试和维护更简单。例如，将复杂规则放在纯函数中，让组合式函数只处理响应式包装：

// counterLogic.js
export function incrementCount(num) {
  return (num * 3) / 2
}

// useCounter.js
import { ref } from 'vue'
import { incrementCount } from './counterLogic'
export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value = incrementCount(count.value)
  }
  return { count, increment }
}

6. 一个函数处理同步和异步数据

异步 + 同步组合式函数模式（Async + Sync Composables Pattern）将同步和异步行为合并到一个组合式函数中。例如，一个组合式函数可以返回一个 Promise，同时提供即时的响应式属性用于同步使用：

import { ref } from 'vue'
export function useAsyncOrSync() {
  const data = ref(null)
  const promise = fetch('/api')
    .then(res => res.json())
    .then(json => {
      data.value = json
      return { data }
    })
  return Object.assign(promise, { data })
}

7. 让函数参数更具描述性

选项对象模式（Options Object Pattern）通过期望一个配置对象来清理长参数列表。例如，使用选项对象可使函数调用更具描述性：

useRefHistory(someRef, {
  deep: true,
  capacity: 10,
  throttle: 500,
  eventName: 'click',
  immediate: false
})

8. 用默认值防止未定义选项

选项对象模式还建议为每个属性提供默认值。例如，解构选项时提供安全默认值：

export function useRefHistory(someRef, {
  deep = false,
  capacity = Infinity,
  ...rest
} = {}) {
  // 可安全使用 deep、capacity 等
}

9. 根据需要返回简单或复杂值

动态返回模式（Dynamic Return Pattern）确保组合式函数可以根据需要返回单个值或带有更多高级控制的扩展对象。例如，根据需要返回单个 ref 或对象：

export function useLocalStorage(key, defaultValue, { controls = false } = {}) {
  const value = ref(defaultValue)
  function remove() { /* ... */ }
  return controls ? { value, remove } : value
}

10. 将不同逻辑路径分离到各自函数

隐藏组合式函数模式（Hidden Composables Pattern）避免在同一个组合式函数中混合互斥逻辑。例如，将不同逻辑路径拆分为各自组合式函数：

export function useAdminFlow() {
  // 仅管理员逻辑
}
export function useGuestFlow() {
  // 仅访客逻辑
}

11. 一致处理响应式和原始值

灵活参数模式（Flexible Arguments Pattern）确保组合式函数中的输入和输出统一处理为响应式数据或原始值，避免混淆。例如，使用 ref 将输入统一转换为 ref：

import { ref, toValue } from 'vue'
export function useSomething(input) {
  const asRef = ref(input)       // 始终为 ref
}

12. 简化 Ref 解包

灵活参数模式还使用 toValue 进行解包。例如，使用 toValue 简化解包过程：

import { toValue } from 'vue'
export function useLogger(msg) {
  const val = toValue(msg)
  console.log(val)
}

13. 逐步从选项式 API 迁移到组合式 API

选项到组合模式（Options to Composition Pattern）允许逐步将大型选项式 API 组件迁移到组合式 API。例如，将传统选项式组件转换为 script setup：

<script setup>
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
  count.value++
}
</script>

这些技巧有助于编写更易于维护、测试和跨应用复用的 Vue 组合式函数。

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

13 个 Vue 组合式函数技巧，让你的代码更出色