composition-apiにreactiveな引数を渡したいときは関数で渡す

タイトルで終わり。以下補足。

こんな感じのcompositionがあったとする。

function useFoo(name: string) {
  return {
    message: computed(() => `Hello ${name}!`)
  }
}

この場合nameはただのstringなのでreactiveではない。
もしreactiveにしたい場合はrefやcomputedRedを渡したくなる。

function useFoo(name: Ref<string> | ComputedRef<string>) {
  return {
    message: computed(() => `Hello ${name.value}!`)
  }
}

もちろんこれで期待通り動くが、引数の型定義が冗長気味。もしnameがreactive化されたobjectだったりしたらさらに型定義と処理の考慮を追加しないといけない。

詰まるところこのcomposition内では引数がRefやComputedRefなのかといったことに関心を持ちたくない。
そんなときはgeneratorを渡してしまえばすっきりする。

function useFoo(getName: () => string) {
  return {
    message: computed(() => `Hello ${getName()}!`)
  }
}

呼び出し側は渡したいデータがRefだろうと何だろうとgeneratorとして渡せばよい。

const name = ref('okada')
useFoo(() => name.value)

関数で渡しておくとwatchなどにそのまま突っ込むこともできて便利。

function useFoo(getName: () => string) {
  watch(getName, () => { ... })
}

値の更新もしたい場合は作法よくsetterを渡す。Refを渡して好き勝手に変更されると何かと面倒が多い。

function useFoo(getName: () => string, setName: (name: string) => void) { ... }