computedWithControl

computed の依存関係を明示的に定義します。

使用法

import { computedWithControl } from '@vueuse/core'

const source = ref('foo')
const counter = ref(0)

const computedRef = computedWithControl(
  () => source.value, // source を watch、`watch` と同じ
  () => counter.value, // computed getter、`computed` と同じ
)

これにより、counter の変更は computedRef の更新をトリガーしませんが、source の ref はトリガーします。

// @include: main
// ---cut---
console.log(computedRef.value) // 0

counter.value += 1

console.log(computedRef.value) // 0

source.value = 'bar'

console.log(computedRef.value) // 1

手動トリガー

computed の更新を手動でトリガーすることもできます：

// @include: main
// ---cut---
const computedRef = computedWithControl(
  () => source.value,
  () => counter.value,
)

computedRef.trigger()

深いウォッチ

computed とは異なり、computedWithControl はデフォルトで浅いです。 watch と同じオプションを指定して動作を制御できます：

const source = ref({ name: 'foo' })

const computedRef = computedWithControl(
  source,
  () => counter.value,
  { deep: true },
)