useMediaQuery event listeners are recreated every change event

[Ingramz]

Describe the bug

#2178 changed the way how event listeners for useMediaQuery are created and disposed. Previously the update function was only responsible for changing the state, but currently it also both removes and re-creates the event listeners each time that function is called.

vueuse/packages/core/useMediaQuery/index.ts

Lines 24 to 53 in 658444b

	const cleanup = () => {
	if (!mediaQuery)
	return
	if ('removeEventListener' in mediaQuery)
	// eslint-disable-next-line @typescript-eslint/no-use-before-define
	mediaQuery.removeEventListener('change', update)
	else
	// @ts-expect-error deprecated API
	// eslint-disable-next-line @typescript-eslint/no-use-before-define
	mediaQuery.removeListener(update)
	}
	const update = () => {
	if (!isSupported.value)
	return
	cleanup()
	mediaQuery = window!.matchMedia(toRef(query).value)
	matches.value = !!mediaQuery?.matches
	if (!mediaQuery)
	return
	if ('addEventListener' in mediaQuery)
	mediaQuery.addEventListener('change', update)
	else
	// @ts-expect-error deprecated API
	mediaQuery.addListener(update)
	}

If I understand correctly, this was done such that a media query that is passed as a ref would always have the most up to date event listeners in case the value for the ref changes, but besides that specific case, it seems unnecessary to recreate these listeners every time.

Reproduction

https://play.vueuse.org/#N4IgDghgxg1hDmBTAziAXAbVAOwgW0XRADcBXRAWgBNE8BLEAGhGQHtSAnKQtEU7MDHhMQNZFA50wAFzqtsRAGrkABABFadFQAoAFhAA2AMxV1sKgGIdE2KLoCUp5CogqaxRAdZgz8FaVkDOmkATxcDLwB3ZxD2FWlWFUjJaUQVAFVsOg8OZEMVZTSAGToAIw4ISRQVI1YOAtUAJhUAMhUAZhFOAyJdaWkwZDQAemH+QXgAOihWPGGyShp6YaDS4bMaAA9JvAArVABfRhx8HhAAAQXSZERh5H1rKhE2Tm4icaERMQkpWXkiADKD0QVAaiHSN38gWCdBQky6HB6vD6AyGow+Uxmc0u5Gut3ulRB5wAjAAGSbEyak9bYLY7fYgI4nAhEHGIPHDGbWZ7sLhnDFfFA-GRyBS8ADCrAiiCgf3MrBMKBu2Fk+UKKkleDArGQMPkGWhshQCKRIBRgxGYwEQmms2GbI5XMQJPJlOpG0Q2z2hwAuswjHQDMa0KAAIJgMCTBboUCpLUGCCpIgAHio2QAfAAdcwqYDAJxFSpIAESRA2FQHA7Z5PDNPELMKZjiSQyIh0LV1aS5-w3ACyILoEAAiuQOGEDjUOLMVAByB03Tl1RAz7PZ-tp4ejkIlZDSSZgKcJUJgRCTAD6ECoVAAoh4VTvUthEPUALwqdeDkfP7d0Xf7w+sMep6Xjed7SA+NjPmuA6bt+D7-oBgEhCekwgbeNjgb+j7Piob5GPwsqijoECMKUjBQI4+YzNgbBBpMXjwNoM5oWBEFPhwM72AA3PEui-ueLEYWxz7aCRZEURWq7YB+sFjvBB6IUB57WHgrAeOh95YZBr7vjBX5yVhCFHshp4qWpiAaZhu7adBG76T+f4KcZKFmeprFaexuE1ARcrEaR5GUSo1G0aeDFMa5FnudZ7GcTx0h8cgym0OZlnCRwon+RJVbYNmwVdr+hYcMWpblm+eIyfZTHaPQ2AUJEdBUPFaAqI0ACspJgJs9icdmjKVkAA

System Info

N/A

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.