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
fix(useDevicePixelRatio): more efficient mechanism #2044
Conversation
tryOnScopeDispose((function MqResolutionObserve(): Fn { | ||
pixelRatio.value = window.devicePixelRatio | ||
} | ||
|
||
useEventListener(window, 'resize', handleDevicePixelRatio, { passive: true }) | ||
|
||
DEVICE_PIXEL_RATIO_SCALES.forEach((dppx) => { | ||
// listen mql events in both sides | ||
const mqlMin = useMediaQuery(`screen and (min-resolution: ${dppx}dppx)`) | ||
const mqlMax = useMediaQuery(`screen and (max-resolution: ${dppx}dppx)`) | ||
|
||
watch([mqlMin, mqlMax], handleDevicePixelRatio) | ||
}) | ||
mqResolution = window.matchMedia(`(resolution: ${pixelRatio.value}dppx)`) | ||
mqResolution.addEventListener('change', MqResolutionObserve, { once: true }) | ||
return () => { | ||
mqResolution.removeEventListener('change', MqResolutionObserve) | ||
} | ||
})()) |
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.
What's the reason for wraping the function like this?
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.
Just a short way to immediately invoke the function and passing removeEventListener
to tryOnScopeDispose
Hi @antfu |
Description
I implemented a more efficient mechanism for the
useDevicePixelRatio
function that inspired by this exampleAdditional context
Currently the
useDevicePixelRatio
function create 12*2 watchers/eventListeners (+1 window resize) to achieve the same goal, this mechanism use only 1 event listener to check if the currentresolution
changed (once) then update the value and recursively check the new valueWhat is the purpose of this pull request?
Before submitting the PR, please make sure you do the following
fixes #123
).