Skip to content

syncRefs

Category
Export Size
158 B
Last Changed
last year
Related

将目标引用与源引用保持同步

Demo

用法

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

与多个目标同步

您也可以传递一个引用数组来同步。

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

const source = ref('hello')
const target1 = ref('target1')
const target2 = ref('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

监听选项

syncRefs 的选项类似于 watchWatchOptions,但具有不同的默认值。

ts
export interface SyncRefOptions {
  /**
   * 同步时机,与 watch 的 flush 选项相同
   *
   * @default 'sync'
   */
  flush?: WatchOptions['flush']
  /**
   * 深度监视
   *
   * @default false
   */
  deep?: boolean
  /**
   * 立即同步值
   *
   * @default true
   */
  immediate?: boolean
}
js
export {}

当设置 { flush: 'pre' } 时,目标引用将在渲染开始之前的 当前“tick” 结束时更新。

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 <- 仍未更改,因为设置了 flush 'pre'

await nextTick()

console.log(target.value) // foo <- 已更改!

类型声明

typescript
export interface SyncRefsOptions extends ConfigurableFlushSync {
  /**
   * 深度监视
   *
   * @default false
   */
  deep?: boolean
  /**
   * 立即同步值
   *
   * @default true
   */
  immediate?: boolean
}
/**
 * 将目标 ref 与源 ref 保持同步
 *
 * @param source 源 ref
 * @param targets 目标值
 */
export declare function syncRefs<T>(
  source: WatchSource<T>,
  targets: Ref<T> | Ref<T>[],
  options?: SyncRefsOptions,
): WatchStopHandle

Source

SourceDemoDocs

贡献者

Anthony Fu
丶远方
空杯
Nozomu Ikuta
sun0day
Bruno Perel

变更日志

No recent changes

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow.
Get Early Access