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

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),
  (elemen) => {
    if (!elemen) 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
Dirilis di bawah lisensi MIT. Ditulis ulang untuk Vue dari shadcn-vue, shadcn-ui-blocks, dan shadcn-hooks. Hak cipta © 2026 Kliping