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

useEffectWithTarget

PreviousNext

Menjalankan sesuatu terhadap elemen DOM yang boleh berganti.

Tidak ada yang perlu dipasang.

Vue sudah menyediakan padanannya — lib/target + watch. Halaman ini menjelaskan cara memakainya.

Di Kliping ini turun jadi helper, bukan composable yang dipasang sendiri. toValue() sudah menyelesaikan ref dan getter sekaligus, jadi yang tersisa cuma satu hal: instance komponen yang menyimpan elemennya di $el.

ts
import { getTargetElement } from '@/lib/target'

watch(
  () => getTargetElement(target),
  (element) => {
    if (!element) return
    // pasang di sini — dan lepas yang lama lebih dulu
  },
  { immediate: true, flush: 'post' },
)

Dua opsi di baris terakhir itu penting: immediate supaya target yang sudah ada sejak awal tidak menunggu perubahan yang tidak akan datang, dan flush: 'post' supaya template ref-nya sudah terisi saat gilirannya tiba.

getTargetElement ikut terpasang otomatis bersama composable mana pun yang membutuhkannya.

PrevioususeEffectEventNext useInterval

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

LicenseCreditsRoadmap