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. useDeepCompareLayoutEffect

useDeepCompareLayoutEffect

PreviousNext

Perubahan isi objek yang ditangani sebelum peramban menggambar.

Tidak ada yang perlu dipasang.

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

ts
watch(box, updatePosition, { deep: true, flush: 'sync' })

flush menentukan kapan callback-nya berjalan, dan Vue punya tiga:

flushKapan
'pre'sebelum komponennya digambar ulang — bawaan
'post'sesudah DOM-nya diperbarui — untuk mengukur
'sync'seketika saat sumbernya berubah

Pakai 'sync' hanya kalau memang perlu. Pekerjaan sinkron di jalur ini menahan pembaruan berikutnya, dan untuk sebagian besar penyesuaian tata letak, 'post' justru yang benar — di sana DOM-nya sudah ada dan bisa diukur.

PrevioususeDeepCompareEffectNext useEffectEvent

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

LicenseCreditsRoadmap