-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/9 add use resize observer hook #18
base: main
Are you sure you want to change the base?
Conversation
<p>Resize the window or click on the resize button to see the events being triggered.</p> | ||
<p class="mb-0"> | ||
Note: The <code>callback</code> is debounced by <u>100ms</u> to avoid it from being called | ||
way too much for the sake of the demo. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
too often
addToResizeObserver(source, debouncedCallback); | ||
}); | ||
|
||
onUnmounted(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should not be needed anymore, watch
and watchEffect
are automatically cleaned up since alpha.31
:
Proxy
watch
/watchEffect
to allow auto-cleanup on component unmount – no need to clean these up yourself anymore.
}); | ||
} else { | ||
const removeWatchEffect = watchEffect(() => { | ||
removeFromResizeObserver(source); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You could use the onCleanup
instead: https://vuejs.org/api/reactivity-core.html#watcheffect
That would also make sure you don't need the onUnmounted
below.
Just like in react where you return a dispose function from the hook.
This PR adds the
useResizeObserver
hook and close #9