useCloned

Demo

Usage

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'

Changes to the source are not reflected in the cloned ref immediately. Use { flush: 'sync' } to obtain the updated value without delay.

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'

Manual cloning

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'

Custom Clone Function

Using klona for example:

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

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

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

Type Declarations

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
<T
>,
): UseClonedReturn
<T
>