Skip to content
On this page

syncRef

Category
Export Size
315 B
Last Changed
5 months ago
Related

Two-way refs synchronization.

Demo

Usage

ts
import { syncRef } from '@vueuse/core'

const a = ref('a')
const b = ref('b')

const stop = syncRef(a, b)

console.log(a.value) // a

b.value = 'foo'

console.log(a.value) // foo

a.value = 'bar'

console.log(b.value) // bar
import { syncRef } from '@vueuse/core'

const a = ref('a')
const b = ref('b')

const stop = syncRef(a, b)

console.log(a.value) // a

b.value = 'foo'

console.log(a.value) // foo

a.value = 'bar'

console.log(b.value) // bar

One directional

ts
import { syncRef } from '@vueuse/core'

const a = ref('a')
const b = ref('b')

const stop = syncRef(a, b, { direction: 'rtl' })
import { syncRef } from '@vueuse/core'

const a = ref('a')
const b = ref('b')

const stop = syncRef(a, b, { direction: 'rtl' })

Custom Transform

ts
import { syncRef } from '@vueuse/core'

const a = ref(10)
const b = ref(2)

const stop = syncRef(a, b, {
  transform: {
    ltr: left => left * 2,
    rtl: right => right / 2
  }
})

console.log(b.value) // 20

b.value = 30

console.log(a.value) // 15
import { syncRef } from '@vueuse/core'

const a = ref(10)
const b = ref(2)

const stop = syncRef(a, b, {
  transform: {
    ltr: left => left * 2,
    rtl: right => right / 2
  }
})

console.log(b.value) // 20

b.value = 30

console.log(a.value) // 15

Type Declarations

typescript
export interface SyncRefOptions<L, R = L> extends ConfigurableFlushSync {
  /**
   * Watch deeply
   *
   * @default false
   */
  deep?: boolean
  /**
   * Sync values immediately
   *
   * @default true
   */
  immediate?: boolean
  /**
   * Direction of syncing. Value will be redefined if you define syncConvertors
   *
   * @default 'both'
   */
  direction?: "ltr" | "rtl" | "both"
  /**
   * Custom transform function
   */
  transform?: {
    ltr?: (left: L) => R
    rtl?: (right: R) => L
  }
}
/**
 * Two-way refs synchronization.
 *
 * @param left
 * @param right
 */
export declare function syncRef<L, R = L>(
  left: Ref<L>,
  right: Ref<R>,
  options?: SyncRefOptions<L, R>
): () => void
export interface SyncRefOptions<L, R = L> extends ConfigurableFlushSync {
  /**
   * Watch deeply
   *
   * @default false
   */
  deep?: boolean
  /**
   * Sync values immediately
   *
   * @default true
   */
  immediate?: boolean
  /**
   * Direction of syncing. Value will be redefined if you define syncConvertors
   *
   * @default 'both'
   */
  direction?: "ltr" | "rtl" | "both"
  /**
   * Custom transform function
   */
  transform?: {
    ltr?: (left: L) => R
    rtl?: (right: R) => L
  }
}
/**
 * Two-way refs synchronization.
 *
 * @param left
 * @param right
 */
export declare function syncRef<L, R = L>(
  left: Ref<L>,
  right: Ref<R>,
  options?: SyncRefOptions<L, R>
): () => void

Source

SourceDemoDocs

Contributors

Anthony Fu
Kylegl
Mikhailov Nikita
zmtlwzy
Matias Capeletto

Changelog

v9.0.0-beta.2 on 7/24/2022
348d3 - feat: support custom transforms (#1968)
v7.7.1 on 3/5/2022
36083 - feat!: biSyncRef renamed to syncRef, configable direction
5ec1d - feat!: syncRef renamed to syncRefs
v6.9.0 on 11/14/2021
ca0ff - feat: support more watch source type (#918)

Released under the MIT License.