Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

2.4 KiB

Raw Blame History

category, related

category	related
Reactivity	syncRef

syncRefs

Keep target refs in sync with a source ref

Usage

import { syncRefs } from '@vueuse/core';
import { shallowRef } from 'vue';

const source = shallowRef('hello');
const target = shallowRef('target');

const stop = syncRefs(source, target);

console.log(target.value); // hello

source.value = 'foo';

console.log(target.value); // foo

Sync with multiple targets

You can also pass an array of refs to sync.

import { syncRefs } from '@vueuse/core';
import { shallowRef } from 'vue';

const source = shallowRef('hello');
const target1 = shallowRef('target1');
const target2 = shallowRef('target2');

const stop = syncRefs(source, [target1, target2]);

console.log(target1.value); // hello
console.log(target2.value); // hello

source.value = 'foo';

console.log(target1.value); // foo
console.log(target2.value); // foo

Watch options

The options for syncRefs are similar to watch's WatchOptions but with different default values.

export interface SyncRefOptions {
  /**
   * Timing for syncing, same as watch's flush option
   *
   * @default 'sync'
   */
  flush?: WatchOptionFlush;
  /**
   * Watch deeply
   *
   * @default false
   */
  deep?: boolean;
  /**
   * Sync values immediately
   *
   * @default true
   */
  immediate?: boolean;
}

When setting { flush: 'pre' }, the target reference will be updated at the end of the current "tick" before rendering starts.

import { syncRefs } from '@vueuse/core';
import { nextTick, shallowRef } from 'vue';

const source = shallowRef('hello');
const target = shallowRef('target');

syncRefs(source, target, { flush: 'pre' });

console.log(target.value); // hello

source.value = 'foo';

console.log(target.value); // hello <- still unchanged, because of flush 'pre'

await nextTick();

console.log(target.value); // foo <- changed!

Type Declarations

export interface SyncRefsOptions extends ConfigurableFlushSync {
  /**
   * Watch deeply
   *
   * @default false
   */
  deep?: boolean;
  /**
   * Sync values immediately
   *
   * @default true
   */
  immediate?: boolean;
}
/**
 * Keep target ref(s) in sync with the source ref
 *
 * @param source source ref
 * @param targets
 */
export declare function syncRefs<T>(
  source: WatchSource<T>,
  targets: Ref<T> | Ref<T>[],
  options?: SyncRefsOptions,
): WatchHandle;

2.4 KiB Raw Blame History