kliping.pro
  • Docs
  • Explore
  • Builder
  • Directory
  • Colors
  • Typeset
Saved
Hooks
  • Getting Started2
  • State7
  • Advanced6
  • Lifecycle16
  • useDebounceEffect
  • useDebounceFn
  • useDeepCompareEffect
  • useDeepCompareLayoutEffect
  • useEffectEvent
  • useEffectWithTarget
  • useInterval
  • useIsHydrated
  • useIsomorphicLayoutEffect
  • useMount
  • useThrottleEffect
  • useThrottleFn
  • useTimeout
  • useUnmount
  • useUpdate
  • useUpdateEffect
  • Browser21
  • Development1
  • Third-Party4
  • Libraries4
  1. Hooks
  2. Lifecycle
  3. useDeepCompareEffect

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, reload, { 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.type, filter.order], reload)

Lebih murah, dan maksudnya lebih terbaca. Lihat useCustomCompareEffect.

PrevioususeDebounceFnNext useDeepCompareLayoutEffect

© 2026 Kliping. Free components are open source under the MIT License.

LicenseCreditsRoadmap