Skip to content
On this page

useCloned

Category
Export Size
Last Changed
3 months ago

Reactive clone of a ref. By default, it use JSON.parse(JSON.stringify()) to do the clone.

Demo

Usage

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

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

const { cloned } = useCloned(original)

original.key = 'some new value'

console.log(cloned.value.key) // 'some new value'
import { useCloned } from '@vueuse/core'

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

const { cloned } = useCloned(original)

original.key = 'some new value'

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

Manual cloning

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

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

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

original.key = 'manual'

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

sync()

console.log(cloned.value.key)// 'manual'
import { useCloned } from '@vueuse/core'

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

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

original.key = 'manual'

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

sync()

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

Custom Clone Function

Using klona for example:

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

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

const { cloned, sync } = useCloned(original, { clone: klona })
import { useCloned } from '@vueuse/core'
import { klona } from 'klona'

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

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

Type Declarations

typescript
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: ComputedRef<T>
  /**
   * Sync cloned data with source manually
   */
  sync: () => void
}
export declare type CloneFn<F, T = F> = (x: F) => T
export declare function cloneFnJSON<T>(source: T): T
export declare function useCloned<T>(
  source: MaybeComputedRef<T>,
  options?: UseClonedOptions
): {
  cloned: Ref<UnwrapRef<T>>
  sync: () => void
}
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: ComputedRef<T>
  /**
   * Sync cloned data with source manually
   */
  sync: () => void
}
export declare type CloneFn<F, T = F> = (x: F) => T
export declare function cloneFnJSON<T>(source: T): T
export declare function useCloned<T>(
  source: MaybeComputedRef<T>,
  options?: UseClonedOptions
): {
  cloned: Ref<UnwrapRef<T>>
  sync: () => void
}

Source

SourceDemoDocs

Contributors

Eduardo Wesley
Mikhailov Nikita

Changelog

v9.2.0 on 9/5/2022
369e1 - feat(useVModel): support clone option (#2022)
0a0a1 - feat: new function (#2045)

Released under the MIT License.