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 
23Changes to the source are not reflected in the cloned ref immediately.
24Use `{ flush: 'sync' }` to obtain the updated value without delay.
25 
26```ts
27const { cloned } = useCloned(original, { flush: 'sync' })
28 
29original.value.key = 'some new value'
30 
31console.log(cloned.value.key) // 'some new value'
32```
33 
34## Manual cloning
35 
36```ts
37import { useCloned } from '@vueuse/core'
38 
39const original = ref({ key: 'value' })
40 
41const { cloned, sync } = useCloned(original, { manual: true })
42 
43original.value.key = 'manual'
44 
45console.log(cloned.value.key) // 'value'
46 
47sync()
48 
49console.log(cloned.value.key)// 'manual'
50```
51 
52## Custom Clone Function
53 
54Using [`klona`](https://www.npmjs.com/package/klona) for example:
55 
56```ts
57import { useCloned } from '@vueuse/core'
58import { klona } from 'klona'
59 
60const original = ref({ key: 'value' })
61 
62const { cloned, isModified, sync } = useCloned(original, { clone: klona })
63```
64 
65## Type Declarations
66 
67```ts
68export interface UseClonedOptions<T = any> extends WatchOptions {
69  /**
70   * Custom clone function.
71   *
72   * By default, it use `JSON.parse(JSON.stringify(value))` to clone.
73   */
74  clone?: (source: T) => T
75  /**
76   * Manually sync the ref
77   *
78   * @default false
79   */
80  manual?: boolean
81}
82export interface UseClonedReturn<T> {
83  /**
84   * Cloned ref
85   */
86  cloned: Ref<T>
87  /**
88   * Ref indicates whether the cloned data is modified
89   */
90  isModified: Ref<boolean>
91  /**
92   * Sync cloned data with source manually
93   */
94  sync: () => void
95}
96export type CloneFn<F, T = F> = (x: F) => T
97export declare function cloneFnJSON<T>(source: T): T
98export declare function useCloned<T>(
99  source: MaybeRefOrGetter<T>,
100  options?: UseClonedOptions,
101): UseClonedReturn<T>
102```
103