useCloned

分类

实用工具

导出大小

289 B

上次更改

8 个月前

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

演示

源代码在线演练 (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'

手动克隆

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 {
  /**
   * Custom clone function.
   *
   * By default, it use `JSON.parse(JSON.stringify(value))` to clone.
   */
  clone
?: (source
: T
) => T

  /**
   * Manually sync the ref
   *
   * @default false
   */
  manual
?: boolean
}
export interface UseClonedReturn
<T
> {
  /**
   * Cloned ref
   */
  cloned
: Ref
<T
>
  /**
   * Ref indicates whether the cloned data is modified
   */
  isModified
: Ref
<boolean>
  /**
   * Sync cloned data with source manually
   */
  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
,
): UseClonedReturn
<T
>