50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import { shallowReadonly, shallowRef, toRef, watch } from 'vue';
|
|
import type { MaybeRefOrGetter, ShallowRef, WatchOptions } from 'vue';
|
|
|
|
export type UsePreviousOptions = Pick<WatchOptions, 'deep' | 'flush'>;
|
|
|
|
/**
|
|
* @name usePrevious
|
|
* @category Reactivity
|
|
* @description Track the previous value of a ref, getter, or reactive source.
|
|
*
|
|
* @param {MaybeRefOrGetter<T>} value The source value to track
|
|
* @param {T} [initialValue] The initial previous value, or an options object
|
|
* @param {UsePreviousOptions} [options={}] Watch options (`deep`, `flush`)
|
|
* @returns {Readonly<ShallowRef<T | undefined>>} The previous value of the source
|
|
*
|
|
* @example
|
|
* const count = ref(0);
|
|
* const prev = usePrevious(count);
|
|
* count.value = 1; // prev.value === 0
|
|
*
|
|
* @example
|
|
* const count = ref(0);
|
|
* const prev = usePrevious(count, -1); // prev.value === -1 until count changes
|
|
*
|
|
* @example
|
|
* const state = reactive({ n: 1 });
|
|
* const prev = usePrevious(() => ({ ...state }), undefined, { deep: true });
|
|
*
|
|
* @since 0.0.14
|
|
*/
|
|
export function usePrevious<T>(value: MaybeRefOrGetter<T>, initialValue: T, options?: UsePreviousOptions): Readonly<ShallowRef<T>>;
|
|
export function usePrevious<T>(value: MaybeRefOrGetter<T>, initialValue?: undefined, options?: UsePreviousOptions): Readonly<ShallowRef<T | undefined>>;
|
|
export function usePrevious<T>(
|
|
value: MaybeRefOrGetter<T>,
|
|
initialValue?: T,
|
|
options: UsePreviousOptions = {},
|
|
): Readonly<ShallowRef<T | undefined>> {
|
|
const previous = shallowRef<T | undefined>(initialValue);
|
|
|
|
watch(
|
|
toRef(value),
|
|
(_, oldValue) => {
|
|
previous.value = oldValue;
|
|
},
|
|
{ flush: options.flush ?? 'sync', deep: options.deep },
|
|
);
|
|
|
|
return shallowReadonly(previous);
|
|
}
|