Skip to content
On this page

computedWithControl

Category
Last Changed
3 months ago
Alias
controlledComputed
Related

Explicitly define the deps of computed.

Usage

import { computedWithControl } from '@vueuse/core'

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

const computedRef = computedWithControl(
  () => source.value, // watch source, same as `watch`
  () => counter.value, // computed getter, same as `computed`
)
import { computedWithControl } from '@vueuse/core'

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

const computedRef = computedWithControl(
  () => source.value, // watch source, same as `watch`
  () => counter.value, // computed getter, same as `computed`
)

With this, the changes of counter won't trigger computedRef to update but the source ref does.

console.log(computedRef.value) // 0

counter.value += 1

console.log(computedRef.value) // 0

source.value = 'bar'

console.log(computedRef.value) // 1
console.log(computedRef.value) // 0

counter.value += 1

console.log(computedRef.value) // 0

source.value = 'bar'

console.log(computedRef.value) // 1

Type Declarations

/**
 * Explicitly define the deps of computed.
 *
 * @param source
 * @param fn
 */
export declare function computedWithControl<T, S>(
  source: WatchSource<S>,
  fn: () => T
): ComputedRef<T>
export { computedWithControl as controlledComputed }
/**
 * Explicitly define the deps of computed.
 *
 * @param source
 * @param fn
 */
export declare function computedWithControl<T, S>(
  source: WatchSource<S>,
  fn: () => T
): ComputedRef<T>
export { computedWithControl as controlledComputed }

Source

SourceDocs

Contributors

Anthony Fu

Changelog

No recent changes
computedWithControl has loaded