useCloned

类别

Utilities

导出体积

289 B

上次更改

7 minutes ago

对 ref 进行响应式克隆。默认情况下，它使用 JSON.parse(JSON.stringify()) 进行克隆。

示例

源码 playground (beta)

使用方法

import { useCloned
 } from '@vueuse/core'

const original
 = ref
({ key
: 'value' })

const { cloned
 } = useCloned
(original
)

original
.value
.key
 = 'some new value'

console
.log
(cloned
.value
.key
) // 'value'

对源对象的更改不会立即反映到克隆的 ref 中。使用 { flush: 'sync' } 可在不延迟的情况下获取更新后的值。

TypeScript

const { cloned
 } = useCloned(original, { flush
: 'sync' })

original.value.key = 'some new value'

console
.log
(cloned
.value.key) // 'some new value'

'use strict'
const { cloned } = useCloned(original, { flush: 'sync' })
original.value.key = 'some new value'
console.log(cloned.value.key) // 'some new value'

手动克隆

import { useCloned
 } from '@vueuse/core'

const original
 = ref
({ key
: 'value' })

const { cloned
, sync
 } = useCloned
(original
, { manual
: true })

original
.value
.key
 = 'manual'

console
.log
(cloned
.value
.key
) // 'value'

sync
()

console
.log
(cloned
.value
.key
)// 'manual'

自定义克隆函数

例如使用 klona：

import { useCloned
 } from '@vueuse/core'
import { klona
 } from 'klona'

const original
 = ref
({ key
: 'value' })

const { cloned
, isModified
, sync
 } = useCloned
(original
, { clone
: klona
 })

类型声明

export interface UseClonedOptions
<T
 = any> extends WatchOptions {
  /**
   * 自定义克隆函数。
   *
   * 默认情况下，它使用 `JSON.parse(JSON.stringify(value))` 进行克隆。
   */
  clone
?: (source
: T
) => T

  /**
   * 手动同步 ref
   *
   * @default false
   */
  manual
?: boolean
}
export interface UseClonedReturn
<T
> {
  /**
   * 克隆的 ref
   */
  cloned
: Ref
<T
>
  /**
   * Ref表示克隆的数据是否被修改。
   */
  isModified
: Ref
<boolean>
  /**
   * 手动将克隆的数据与源同步
   */
  sync
: () => void
}
export type CloneFn
<F
, T
 = F
> = (x
: F
) => T

export declare function cloneFnJSON
<T
>(source
: T
): T

export declare function useCloned
<T
>(
  source
: MaybeRefOrGetter
<T
>,
  options
?: UseClonedOptions
<T
>,
): UseClonedReturn
<T
>