feat(useElementVisibility): support reactive options #4933
Conversation
@vueuse/components
@vueuse/core
@vueuse/electron
@vueuse/firebase
@vueuse/integrations
@vueuse/math
@vueuse/metadata
@vueuse/nuxt
@vueuse/router
@vueuse/rxjs
@vueuse/shared
commit: |
|
I think we can modify its underlying const stopWatch = isSupported.value
? watch(
() => [targets.value, unrefElement(root as MaybeComputedElementRef), isActive.value, toValue(rootMargin)] as const,
([targets, root]) => {
cleanup()
if (!isActive.value)
return
if (!targets.length)
return
const observer = new IntersectionObserver(
callback,
{
root: unrefElement(root),
rootMargin: toValue(rootMargin) ?? '0px',
threshold,
},
)
targets.forEach(el => el && observer.observe(el))
cleanup = () => {
observer.disconnect()
cleanup = noop
}
},
{ immediate, flush: 'post' },
)
: noopIn this way, you can just pass the responsive rootMargin directly into |
First, I'd like to clarify that this bug originates in the useElementVisibility hook rather than in useIntersectionObserver. Looking at the documentation, I noticed that rootMargin in useElementVisibility is defined as a MaybeRefOrGetter, indicating it should support reactive values, while in useIntersectionObserver it's defined as a simple string type. This type definition difference suggests that the original design intention was to keep useIntersectionObserver simpler with static configuration, while enabling reactive options in the higher-level useElementVisibility hook. Therefore, I believe modifying useIntersectionObserver would go against its original design principles and could potentially introduce unexpected behavior in other components that rely on it. |
| element, | ||
| (intersectionObserverEntries) => { | ||
| let isIntersecting = elementIsVisible.value | ||
| const cleanup = shallowRef<() => void>(() => {}) |
There was a problem hiding this comment.
This doesn't have to be a ref I think
There was a problem hiding this comment.
ok!I got it! thanks for your CR
…kyLiu/vueuse into useElementVisibility/reactiveOptions
Before submitting the PR, please make sure you do the following
fixes #123).Description
Before:
useElementVisibility accepted a reactive parameter rootMargin,and the it typed as MaybeRefOrGetter,but it didn't support dynamic updates.
After:
Support dynamic updates
Solution
use watchEffect for monitoring changes to all reactive options, including rootMargin, threshold and scrollTarget.When these values change, the old IntersectionObserver is cleaned up and a new instance is created, ensuring the configuration is always up to date.
related #4930