Skip to content

⬅️ Back to Table of Contents

📄 useCached

📊 Analysis Summary

Metric Count
🔧 Functions 1
📦 Imports 6
🟢 Vue Composition API 1
📐 Interfaces 1
📑 Type Aliases 1

📚 Table of Contents

🛠️ File Location:

📂 packages/core/useCached/index.ts

📦 Imports

Name Source
ShallowOrDeepRef @vueuse/shared
Ref vue
WatchOptions vue
ConfigurableDeepRefs ../_configurable
createRef @vueuse/shared
watch vue

Vue Composition API

Name Type Reactive Variables Composables
watch watch none none

Functions

useCached(refValue: Ref<T>, comparator: (newSourceValue: T, cachedValue: T) => …, options: UseCachedOptions<D>): UseCachedReturn<T, D>

Parameters:

  • refValue Ref<T>
  • comparator (newSourceValue: T, cachedValue: T) => boolean
  • options UseCachedOptions<D>

Returns: UseCachedReturn<T, D>

Calls:

  • createRef (from @vueuse/shared)
  • watch (from vue)
  • comparator
Code 
export function useCached<T, D extends boolean = true>(
  refValue: Ref<T>,
  comparator: (newSourceValue: T, cachedValue: T) => boolean = (newSourceValue, cachedValue) => newSourceValue === cachedValue,
  options?: UseCachedOptions<D>,
): UseCachedReturn<T, D> {
  const { deepRefs = true as D, ...watchOptions } = options || {}
  const cachedValue = createRef(refValue.value, deepRefs)

  watch(() => refValue.value, (value) => {
    if (!comparator(value, cachedValue.value))
      cachedValue.value = value
  }, watchOptions)

  return cachedValue
}

Interfaces

UseCachedOptions<D extends boolean = true>

Interface Code 
export interface UseCachedOptions<D extends boolean = true> extends ConfigurableDeepRefs<D>, WatchOptions {}

Type Aliases

UseCachedReturn<T = any, D extends boolean = true>

type UseCachedReturn<T = any, D extends boolean = true> = ShallowOrDeepRef<T, D>;

Generated by Syntax Scribe