1---
2category: Utilities
3---
4 
5# useCached
6 
7Cache a ref with a custom comparator.
8 
9## Usage
10 
11```ts
12import { useCached } from '@vueuse/core'
13import { shallowRef } from 'vue'
14 
15interface Data {
16  value: number
17  extra: number
18}
19 
20const source = shallowRef<Data>({ value: 42, extra: 0 })
21const cached = useCached(source, (a, b) => a.value === b.value)
22 
23source.value = {
24  value: 42,
25  extra: 1,
26}
27 
28console.log(cached.value) // { value: 42, extra: 0 }
29 
30source.value = {
31  value: 43,
32  extra: 1,
33}
34 
35console.log(cached.value) // { value: 43, extra: 1 }
36```
37 
38## Type Declarations
39 
40```ts
41export interface UseCachedOptions<D extends boolean = true>
42  extends ConfigurableDeepRefs<D>, WatchOptions {}
43export declare function useCached<T, D extends boolean = true>(
44  refValue: Ref<T>,
45  comparator?: (a: T, b: T) => boolean,
46  options?: UseCachedOptions<D>,
47): UseCachedReturn<T, D>
48export type UseCachedReturn<
49  T = any,
50  D extends boolean = true,
51> = ShallowOrDeepRef<T, D>
52```
53