A snippet of code in "useEventListener" that confuses me #4105

YuinS316 · 2024-07-18T13:20:57Z

YuinS316
Jul 18, 2024

I guess the target may change and it wants to cleanup the last event and register again.
But what makes me confusing is that after excuted "unrefElement(target)" and it returns the result is not a reactive value, how can make the "watch" function trigger again?
Can anyone tell me the reason. thanks.

@YuinS316 · 2024-07-18T13:25:51Z

dosubot[bot]
bot Jul 18, 2024

@YuinS316 Hello there! I'm here to help you with any issues or questions you have. Let's dive into the problem you're facing!

The watch function can trigger again after executing unrefElement(target) because it is set up to observe changes in the value returned by unrefElement(target). If the result of unrefElement(target) changes, the watch function will re-execute.

In the provided code, unrefElement(target) is used within the watch function to observe changes to the element referenced by target. If target changes and results in a different element being unwrapped by unrefElement, the watch function will trigger again.

Here is the relevant part of the code:

watch(
  () => unrefElement(target),
  (el) => {
    if (!el)
      return

    trap = createFocusTrap(el, {
      ...focusTrapOptions,
      onActivate() {
        hasFocus.value = true

        // Apply if user provided onActivate option
        if (options.onActivate)
          options.onActivate()
      },
      onDeactivate() {
        hasFocus.value = false

        // Apply if user provided onDeactivate option
        if (options.onDeactivate)
          options.onDeactivate()
      },
    })

    // Focus if immediate is set to true
    if (immediate)
      activate()
  },
  { flush: 'post' },
)

Additionally, the watchTriggerable function from the vueuse library demonstrates how a watch can be manually triggered. This function allows for more control over when the watch effect is executed, which can be useful in scenarios where the reactive source might not change automatically. Here is the relevant implementation from the vueuse library:

import type { WatchSource } from 'vue-demi'
import { isReactive } from 'vue-demi'
import type { MapOldSources, MapSources } from '../utils'
import type { WatchIgnorableReturn } from '../watchIgnorable'
import { watchIgnorable } from '../watchIgnorable'
import type { WatchWithFilterOptions } from '../watchWithFilter'
import { toValue } from '../toValue'

export interface WatchTriggerableReturn<FnReturnT = void> extends WatchIgnorableReturn {
  trigger: () => FnReturnT
}

type OnCleanup = (cleanupFn: () => void) => void

export type WatchTriggerableCallback<V = any, OV = any, R = void> = (value: V, oldValue: OV, onCleanup: OnCleanup) => R

export function watchTriggerable<T extends Readonly<WatchSource<unknown>[]>, FnReturnT>(sources: [...T], cb: WatchTriggerableCallback<MapSources<T>, MapOldSources<T, true>, FnReturnT>, options?: WatchWithFilterOptions<boolean>): WatchTriggerableReturn<FnReturnT>
export function watchTriggerable<T, FnReturnT>(source: WatchSource<T>, cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>, options?: WatchWithFilterOptions<boolean>): WatchTriggerableReturn<FnReturnT>
export function watchTriggerable<T extends object, FnReturnT>(source: T, cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>, options?: WatchWithFilterOptions<boolean>): WatchTriggerableReturn<FnReturnT>

export function watchTriggerable<Immediate extends Readonly<boolean> = false>(
  source: any,
  cb: any,
  options: WatchWithFilterOptions<Immediate> = {},
): WatchTriggerableReturn {
  let cleanupFn: (() => void) | undefined

  function onEffect() {
    if (!cleanupFn)
      return

    const fn = cleanupFn
    cleanupFn = undefined
    fn()
  }

  function onCleanup(callback: () => void) {
    cleanupFn = callback
  }

  const _cb = (
    value: any,
    oldValue: any,
  ) => {
    onEffect()
    return cb(value, oldValue, onCleanup)
  }
  const res = watchIgnorable(source, _cb, options)
  const { ignoreUpdates } = res

  const trigger = () => {
    let res: any
    ignoreUpdates(() => {
      res = _cb(getWatchSources(source), getOldValue(source))
    })
    return res
  }

  return {
    ...res,
    trigger,
  }
}

function getWatchSources(sources: any) {
  if (isReactive(sources))
    return sources
  if (Array.isArray(sources))
    return sources.map(item => toValue(item))
  return toValue(sources)
}

function getOldValue(source: any) {
  return Array.isArray(source)
    ? source.map(() => undefined)
    : undefined
}

In summary, the watch function is triggered again because it is observing the result of unrefElement(target). If target changes and results in a different element, the watch will re-execute. Additionally, using watchTriggerable can provide more control over when the watch effect is triggered ^[1]^[2]^[3]^[4].

To continue talking to Dosu, mention @dosu.

2 replies

YuinS316 Jul 18, 2024
Author

I mean, how the watch how target is change? target is not a reactivity param. That makes me confused, because I think it won't be tracked by getter,so when it changed, watch will not trigger

dosubot[bot] bot Jul 18, 2024

The watch function can detect changes to target and re-execute because targetElement is a computed property that depends on target. When target changes, targetElement will also change, triggering the watch function.

Here is the relevant code snippet:

const targetElement = computed(() => unrefElement(target))

watch(
    targetElement,
    () => {
      focused.value = initialValue
    },
    { immediate: true, flush: 'post' },
)

In this code, targetElement is a computed property that calls unrefElement(target). The watch function is set up to observe targetElement. When target changes, unrefElement(target) will return a new value, causing targetElement to update and triggering the watch callback ^[1].

Additionally, the watchTriggerable function from the vueuse library can be used to manually trigger the watch effect. This function allows you to set up a watch on a source and provides a trigger method to manually invoke the watch callback. Here is an example:

import { ref, reactive, nextTick } from 'vue-demi'
import { watchTriggerable } from '@vueuse/core'

const source = ref(0)
const effect = ref(0)
const { trigger } = watchTriggerable(source, (value) => {
  effect.value = value
})

// Manually trigger the watch effect
trigger()
console.log(effect.value) // Outputs: 0

source.value = 1
await nextTick()
console.log(effect.value) // Outputs: 1

This approach ensures that the watch effect can be triggered both reactively and manually, providing more control over the reactivity system ^[2].

To continue talking to Dosu, mention @dosu.

ilyaliao · 2025-02-07T16:01:58Z

ilyaliao
Feb 7, 2025
Collaborator

However, when you need to access an element in Vue, you would use ref or useTemplateRef. Therefore, when passing it to useEventListener, the target will be reactive.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

A snippet of code in "useEventListener" that confuses me #4105

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

A snippet of code in "useEventListener" that confuses me #4105

Uh oh!

YuinS316 Jul 18, 2024

Replies: 2 comments · 2 replies

Uh oh!

dosubot[bot] bot Jul 18, 2024

Uh oh!

YuinS316 Jul 18, 2024 Author

Uh oh!

dosubot[bot] bot Jul 18, 2024

Uh oh!

ilyaliao Feb 7, 2025 Collaborator

YuinS316
Jul 18, 2024

Replies: 2 comments 2 replies

dosubot[bot]
bot Jul 18, 2024

YuinS316 Jul 18, 2024
Author

ilyaliao
Feb 7, 2025
Collaborator