useWhyDidYouUpdate
Mencetak prop mana yang berubah setiap kali komponennya digambar ulang.
jumlah: 0 · label: tetap
Buka konsol peramban — tiap perubahan dicetak beserta nilai lama dan barunya.
Alat bantu saat mencari sebab komponen menggambar ulang lebih sering dari yang masuk akal. Di Vue penyebabnya hampir selalu satu dari dua: sebuah prop berupa objek atau larik yang dibuat baru di induknya pada tiap render, atau sebuah fungsi inline yang identitasnya berganti terus.
Hanya berbunyi saat import.meta.env.DEV. Itu bukan kehati-hatian berlebih — composable ini akan ikut tersalin ke project orang, dan console.log yang lolos ke produksi adalah kebocoran kecil yang menetap lama.
Yang dikirim harus reaktif: objek props sebuah komponen, reactive(), atau getter yang membaca keduanya. Objek biasa tidak punya apa pun untuk dipantau, jadi composable ini akan diam selamanya — bukan karena tidak ada yang berubah, melainkan karena perubahannya tidak bisa terlihat. Di dalam komponen hal ini tidak pernah jadi soal, karena props memang selalu reaktif.
Pemasangan
npx shadcn-vue@latest add @kliping/use-why-did-you-update 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.
import { watch } from 'vue'
import type { MaybeRefOrGetter } from 'vue'
import { toValue } from 'vue'
export type PropsTerpantau = Record<string, any>
export function useWhyDidYouUpdate(
nama: string,
props: MaybeRefOrGetter<PropsTerpantau>,
) {
if (!import.meta.env.DEV)
return
let sebelumnya: PropsTerpantau = { ...toValue(props) }
watch(
() => ({ ...toValue(props) }),
(kini) => {
const semuaKunci = new Set([
...Object.keys(sebelumnya),
...Object.keys(kini),
])
const berubah: PropsTerpantau = {}
for (const kunci of semuaKunci) {
if (!Object.is(sebelumnya[kunci], kini[kunci]))
berubah[kunci] = { dari: sebelumnya[kunci], jadi: kini[kunci] }
}
if (Object.keys(berubah).length)
console.log('[why-did-you-update]', nama, berubah)
sebelumnya = kini
},
)
}API
export type PropsTerpantau = Record<string, any>
export function useWhyDidYouUpdate(
nama: string,
props: MaybeRefOrGetter<PropsTerpantau>,
)