vueuse/vueuse

BUG | `useElementVisibility` | Possible issue with `once` watcher inside of callback

Open

#4704 opened on Apr 13, 2025

View on GitHub
 (1 comment) (1 reaction) (0 assignees)TypeScript (18,007 stars) (2,269 forks)batch import
good first issuehas pr

Description

Describe the bug

I was looking at the source code for this composable and noticed that the watchOnce call is happening inside of the intersection callback.

https://github.com/vueuse/vueuse/blob/44b402ef2c236c6418fab9526443db0ba9f8b8b4/packages/core/useElementVisibility/index.ts#L60-L64

Was this intentional? Wouldn't this create a new watcher on each update, kind of separate to the initial effect scope? I would have guessed that this hook would have to be outside of the useIntersectionObserver call.

Reproduction

n/a

System Info

n/a

Used Package Manager

npm

Validations

Contributor guide

Tech stack
typescriptvue
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue composition API knowledgeUnderstanding of VueUse watchers
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine https://github.com/vueuse/vueuse/blob/44b402ef2c236c6418fab9526443db0ba9f8b8b4/packages/core/useElementVisibility/index.ts#L60 L64 where watchOnce is called inside the intersection callback. The issue suggests this may create a new watcher on each update. Consider moving the watchOnce call outside the useIntersectionObserver callback, similar to how other composables handle such watchers. Verify with existing tests and ensure no regression.