⬅️ Back to Table of Contents

📄 syncRefs

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	5
🟢 Vue Composition API	1
📐 Interfaces	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/shared/syncRefs/index.ts

📦 Imports

Name	Source
Ref	vue
WatchSource	vue
ConfigurableFlushSync	../utils
watch	vue
toArray	../utils

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none

---

Functions

syncRefs(source: WatchSource<T>, targets: Ref<T> | Ref<T>[], options: SyncRefsOptions): any

Keep target ref(s) in sync with the source ref

Parameters:

• source any: source ref
• targets any: No description

Raw JSDoc

/**
 * Keep target ref(s) in sync with the source ref
 *
 * @param source source ref
 * @param targets
 */

Calls:

• toArray (from ../utils)
• watch (from vue)
• targetsArray.forEach

Code

export function syncRefs<T>(
  source: WatchSource<T>,
  targets: Ref<T> | Ref<T>[],
  options: SyncRefsOptions = {},
) {
  const {
    flush = 'sync',
    deep = false,
    immediate = true,
  } = options

  const targetsArray = toArray(targets)

  return watch(
    source,
    newValue => targetsArray.forEach(target => target.value = newValue),
    { flush, deep, immediate },
  )
}

---

Interfaces

SyncRefsOptions

Interface Code

export interface SyncRefsOptions extends ConfigurableFlushSync {
  /**
   * Watch deeply
   *
   * @default false
   */
  deep?: boolean
  /**
   * Sync values immediately
   *
   * @default true
   */
  immediate?: boolean
}

Properties

Name	Type	Optional	Description
deep	boolean	✓	not shown
immediate	boolean	✓	not shown

---

Generated by Syntax Scribe