Memulai
Siklus Hidup
Peramban
Pengembangan
Paket Luar
usePrevious
Nilai sebelumnya dari sesuatu yang berubah.
Sekarang: merah
Sebelumnya: —
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.
Pemasangan
npx 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 PembandingPrevious<T> = (sebelum: T | undefined, kini: T) => boolean
const bawaan = <T>(sebelum: T | undefined, kini: T) => !Object.is(sebelum, kini)
export function usePrevious<T>(
value: MaybeRefOrGetter<T>,
shouldUpdate: PembandingPrevious<T> = bawaan,
) {
const sebelumnya = shallowRef<T | undefined>(undefined)
let kini = toValue(value)
watch(
() => toValue(value),
(baru) => {
if (!shouldUpdate(kini, baru))
return
sebelumnya.value = kini
kini = baru
},
{ flush: 'sync' },
)
return sebelumnya
}API
ts
export type PembandingPrevious<T> = (sebelum: T | undefined, kini: T) => boolean
export function usePrevious<T>(
value: MaybeRefOrGetter<T>,
shouldUpdate: PembandingPrevious<T> = bawaan,
)