1---
2category: Utilities
3---
4 
5# useCloned
6 
7Reactive clone of a ref. By default, it use `JSON.parse(JSON.stringify())` to do the clone.
8 
9## Usage
10 
11```ts
12import { useCloned } from '@vueuse/core'
13 
14const original = ref({ key: 'value' })
15 
16const { cloned } = useCloned(original)
17 
18original.value.key = 'some new value'
19 
20console.log(cloned.value.key) // 'value'
21```
22 
23## Manual cloning
24 
25```ts
26import { useCloned } from '@vueuse/core'
27 
28const original = ref({ key: 'value' })
29 
30const { cloned, sync } = useCloned(original, { manual: true })
31 
32original.value.key = 'manual'
33 
34console.log(cloned.value.key) // 'value'
35 
36sync()
37 
38console.log(cloned.value.key)// 'manual'
39```
40 
41## Custom Clone Function
42 
43Using [`klona`](https://www.npmjs.com/package/klona) for example:
44 
45```ts
46import { useCloned } from '@vueuse/core'
47import { klona } from 'klona'
48 
49const original = ref({ key: 'value' })
50 
51const { cloned, isModified, sync } = useCloned(original, { clone: klona })
52```
53 
54## Type Declarations
55 
56```ts
57export interface UseClonedOptions<T = any> extends WatchOptions {
58  /**
59   * Custom clone function.
60   *
61   * By default, it use `JSON.parse(JSON.stringify(value))` to clone.
62   */
63  clone?: (source: T) => T
64  /**
65   * Manually sync the ref
66   *
67   * @default false
68   */
69  manual?: boolean
70}
71export interface UseClonedReturn<T> {
72  /**
73   * Cloned ref
74   */
75  cloned: Ref<T>
76  /**
77   * Ref indicates whether the cloned data is modified
78   */
79  isModified: Ref<boolean>
80  /**
81   * Sync cloned data with source manually
82   */
83  sync: () => void
84}
85export type CloneFn<F, T = F> = (x: F) => T
86export declare function cloneFnJSON<T>(source: T): T
87export declare function useCloned<T>(
88  source: MaybeRefOrGetter<T>,
89  options?: UseClonedOptions,
90): UseClonedReturn<T>
91```
92