Skip to content

useCached

Category
Export Size
169 B
Last Changed
3 years ago

Cache a ref with a custom comparator.

Demo

Value: 42
Extra: 0
Cached Value: 42
Cached Extra: 0

Usage

ts
import { useCached } from '@vueuse/core'

interface Data {
  value: number
  extra: number
}

const source = ref<Data>({ value: 42, extra: 0 })
const cached = useCached(source, (a, b) => a.value === b.value)

source.value = {
  value: 42,
  extra: 1,
}

console.log(cached.value) // { value: 42, extra: 0 }

source.value = {
  value: 43,
  extra: 1,
}

console.log(cached.value) // { value: 43, extra: 1 }
js
import { useCached } from '@vueuse/core'
const source = ref({ value: 42, extra: 0 })
const cached = useCached(source, (a, b) => a.value === b.value)
source.value = {
  value: 42,
  extra: 1,
}
console.log(cached.value) // { value: 42, extra: 0 }
source.value = {
  value: 43,
  extra: 1,
}
console.log(cached.value) // { value: 43, extra: 1 }

Type Declarations

typescript
export declare function useCached<T>(
  refValue: Ref<T>,
  comparator?: (a: T, b: T) => boolean,
  watchOptions?: WatchOptions,
): Ref<T>

Source

SourceDemoDocs

Contributors

Anthony Fu
sun0day
lvjiaxuan
Wenlu Wang

Changelog

No recent changes

Released under the MIT License.

Free AI Workshop
Build smarter apps with LLMs, agents, MCPs, and advanced AI tooling
Boost Your Workflow
July 8