kliping.pro
  • Docs
  • Directory
  • Colors
  • Typeset
Hooks
  • State7
  • Advanced6
  • Lifecycle16
    • useDebounceEffect
    • useDebounceFn
    • useDeepCompareEffect
    • useDeepCompareLayoutEffect
    • useEffectEvent
    • useEffectWithTarget
    • useInterval
    • useIsHydrated
    • useIsomorphicLayoutEffect
    • useMount
    • useThrottleEffect
    • useThrottleFn
    • useTimeout
    • useUnmount
    • useUpdate
    • useUpdateEffect
  • Browser21
  • Development1
  • Third-Party4
  • Libraries4

useDeepCompareEffect

PreviousNext

Bereaksi pada perubahan isi objek, bukan penggantian referensinya.

Tidak ada yang perlu dipasang.

Vue sudah menyediakan padanannya — watch(src, cb, { deep: true }). Halaman ini menjelaskan cara memakainya.

Sudah bawaan Vue:

ts
watch(filter, muatUlang, { deep: true })

deep: true menelusuri seluruh isi objeknya, jadi mengubah satu properti di dalam sudah cukup untuk memicunya.

Tapi seringkali ada yang lebih murah. Penelusuran dalam berjalan di setiap pemeriksaan, dan untuk objek besar itu terasa. Kalau yang benar-benar Anda pedulikan cuma beberapa properti, pantau getter-nya saja:

ts
watch(() => [filter.jenis, filter.urutan], muatUlang)

Lebih murah, dan maksudnya lebih terbaca. Lihat useCustomCompareEffect.

PrevioususeDebounceFnNext useDeepCompareLayoutEffect
Dirilis di bawah lisensi MIT. Ditulis ulang untuk Vue dari shadcn-vue, shadcn-ui-blocks, dan shadcn-hooks. Hak cipta © 2026 Kliping