flush: 'sync' bukan pilihan gaya. Nilai sebelumnya paling sering dibaca dari dalam watch lain yang memantau nilai yang sama, dan dengan flush bawaan urutannya tidak dijamin — pembacanya bisa mendapat nilai yang sudah ikut bergeser. Sinkron membuat "sebelumnya" benar-benar berarti sebelumnya.
Panggilan pertama mengembalikan undefined, sama seperti sumbernya: belum ada yang mendahului nilai awal.
Installation
pnpm dlx shadcn-vue@latest add @kliping/use-previous Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Tanpa dependensi — tidak ada berkas lain yang ikut terpasang.
Salin kode berikut ke project Anda.
ts
import { shallowRef, toValue, watch } from 'vue'
import type { MaybeRefOrGetter } from 'vue'
export type PreviousComparator<T> = (previous: T | undefined, current: T) => boolean
const defaultShouldUpdate = <T,>(previous: T | undefined, current: T) =>
!Object.is(previous, current)
export function usePrevious<T>(
value: MaybeRefOrGetter<T>,
shouldUpdate: PreviousComparator<T> = defaultShouldUpdate,
) {
const previousValue = shallowRef<T | undefined>(undefined)
let current = toValue(value)
watch(
() => toValue(value),
(next) => {
if (!shouldUpdate(current, next)) return
previousValue.value = current
current = next
},
{ flush: 'sync' },
)
return previousValue
}API
ts
export type PreviousComparator<T> = (previous: T | undefined, current: T) => boolean
export function usePrevious<T>(
value: MaybeRefOrGetter<T>,
shouldUpdate: PreviousComparator<T> = defaultShouldUpdate,
)