VueUsesyncRefs
Keep target refs in sync with a source ref
Demo
Usage
ts
import { syncRefs } from '@vueuse/core'
const source = ref('hello')
const target = ref('target')
const stop = syncRefs(source, target)
console.log(target.value) // hello
source.value = 'foo'
console.log(target.value) // foo
import { syncRefs } from '@vueuse/core'
const source = ref('hello')
const target = ref('target')
const stop = syncRefs(source, target)
console.log(target.value) // hello
source.value = 'foo'
console.log(target.value) // foo
Watch options
The options for syncRefsare similar to watch's WatchOptions but with different default values.
ts
export interface SyncRefOptions {
/**
* Timing for syncing, same as watch's flush option
*
* @default 'sync'
*/
flush?: WatchOptions['flush']
/**
* Watch deeply
*
* @default false
*/
deep?: boolean
/**
* Sync values immediately
*
* @default true
*/
immediate?: boolean
}
export interface SyncRefOptions {
/**
* Timing for syncing, same as watch's flush option
*
* @default 'sync'
*/
flush?: WatchOptions['flush']
/**
* 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.
ts
import { syncRefs } from '@vueuse/core'
const source = ref('hello')
const target = ref('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!
import { syncRefs } from '@vueuse/core'
const source = ref('hello')
const target = ref('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
typescript
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
): WatchStopHandle
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
): WatchStopHandle
Source
Contributors
Anthony Fu
sun0day
Bruno Perel