適応可能なコンポーザブルの作成

適応可能なコンポーザブルは、リアクティブな入力と非リアクティブな入力の両方を受け入れることができる再利用可能な関数です。これにより、開発者は入力のリアクティブ性を気にすることなく、さまざまなコンテキストでコンポーザブルを使用できます。

Vue.js で適応可能なコンポーザブルを設計する手順：

1. コンポーザブルの目的と API 設計、期待される入出力を確認する。
2. リアクティブであるべき入力パラメーターを特定する (MaybeRef / MaybeRefOrGetter)。
3. toValue() または toRef() を使用して、リアクティブエフェクト内で入力を正規化する。
4. Vue のリアクティビティ API を使用してコンポーザブルのコア ロジックを実装する。

コア型の概念

型ユーティリティ

/**
 * value or writable 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);

ポリシーとルール

• 読み取り専用、computed フレンドリーな入力：MaybeRefOrGetter を使用
• 書き込み可能 / 双方向入力が必要：MaybeRef を使用
• パラメーターが関数値（コールバック/述語/比較関数）の可能性がある：MaybeRefOrGetter を使用しない、またはそれを誤ってゲッターとして呼び出す可能性があります。
• DOM/Element ターゲット：計算/派生ターゲットが必要な場合は、MaybeRefOrGetter を使用します。

MaybeRefOrGetter または MaybeRef が使用される場合：

• リアクティブな値を toRef() を使用して解決する（例：watcher ソース）
• 非リアクティブな値を toValue() を使用して解決する

例

適応可能な useDocumentTitle コンポーザブル：読み取り専用の title パラメーター

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 コンポーザブル：双方向書き込み可能な count パラメーター

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