fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.7 KiB
1.7 KiB
category
| category |
|---|
| Utilities |
useCloned
Reactive clone of a ref. By default, it use JSON.parse(JSON.stringify()) to do the clone.
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'
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,
): UseClonedReturn<T>;