创建适应性可组合函数

适应性可组合函数是可重用的函数，可以接受响应式和非响应式输入。这允许开发人员在各种上下文中使用可组合函数，而无需担心输入的响应性。

在 Vue.js 中设计适应性可组合函数的步骤：

1. 确认可组合函数的目的、API 设计以及预期的输入/输出。
2. 识别应该是响应式的输入参数 (MaybeRef / MaybeRefOrGetter)。
3. 在响应式副作用内使用 toValue() 或 toRef() 规范化输入。
4. 使用 Vue 的响应式 API 实现可组合函数的核心逻辑。

核心类型概念

类型工具

/**
 * 值或可写的 ref (value/ref/shallowRef/writable computed)
 */
export type MaybeRef<T = any> = T | Ref<T> | ShallowRef<T> | WritableComputedRef<T>;

/**
 * MaybeRef<T> + ComputedRef<T> + () => T
 */
export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T);

策略和规则

• 只读、计算属性友好的输入：使用 MaybeRefOrGetter
• 需要是可写的 / 双向输入：使用 MaybeRef
• 参数可能是函数值（回调/谓词/比较器）：不要使用 MaybeRefOrGetter，否则可能会意外地将其作为 getter 调用。
• DOM/Element 目标：如果你想要计算/派生的目标，使用 MaybeRefOrGetter。

当使用 MaybeRefOrGetter 或 MaybeRef 时：

• 使用 toRef() 解析响应式值（例如侦听器源）
• 使用 toValue() 解析非响应式值

示例

适应性 useDocumentTitle 可组合函数：只读标题参数

import { watch, toRef } from 'vue'
import type { MaybeRefOrGetter } from 'vue'

export function useDocumentTitle(title: MaybeRefOrGetter<string>) {
  watch(toRef(title), (t) => {
    document.title = t
  }, { immediate: true })
}

适应性 useCounter 可组合函数：双向可写计数参数

import { watch, toRef } from 'vue'
import type { MaybeRef } from 'vue'

function useCounter(count: MaybeRef<number>) {
  const countRef = toRef(count)
  function add() {
    countRef.value++
  }
  return { add }
}