⬅️ Back to Table of Contents

📄 refDebounced

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	8
📊 Variables & Constants	2
🟢 Vue Composition API	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Variables & Constants
• Vue Composition API
• Functions
• Type Aliases

🛠️ File Location:

📂 packages/shared/refDebounced/index.ts

📦 Imports

Name	Source
MaybeRefOrGetter	vue
Ref	vue
DebounceFilterOptions	../utils
deepRef	vue
shallowReadonly	vue
toValue	vue
watch	vue
useDebounceFn	../useDebounceFn

---

Variables & Constants

Name	Type	Kind	Value	Exported
debouncedRef	<T>(value: Ref<T>, ms?: MaybeRefOrGet...	const	refDebounced	✓
useDebounce	<T>(value: Ref<T>, ms?: MaybeRefOrGet...	const	refDebounced	✓

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none

---

Functions

refDebounced(value: Ref<T>, ms: MaybeRefOrGetter<number>, options: DebounceFilterOptions): RefDebouncedReturn<T>

Debounce updates of a ref.

Returns: undefined A new debounced ref.

Raw JSDoc

/**
 * Debounce updates of a ref.
 *
 * @return A new debounced ref.
 */

Calls:

• deepRef (from vue)
• toValue (from vue)
• useDebounceFn (from ../useDebounceFn)
• watch (from vue)
• updater
• shallowReadonly (from vue)

Code

export function refDebounced<T>(value: Ref<T>, ms: MaybeRefOrGetter<number> = 200, options: DebounceFilterOptions = {}): RefDebouncedReturn<T> {
  const debounced = deepRef(toValue(value)) as Ref<T>

  const updater = useDebounceFn(() => {
    debounced.value = value.value
  }, ms, options)

  watch(value, () => updater())

  return shallowReadonly(debounced)
}

---

Type Aliases

RefDebouncedReturn<T = any>

type RefDebouncedReturn<T = any> = Readonly<Ref<T>>;

---

Generated by Syntax Scribe