I have a function that listens for viewport dimensions when the project is first mounted and also after each resize event.
However, I am unsure of the correct way to remove this listener.
const { createApp, onMounted, ref } = Vue;
const app = createApp({
setup() {
const dim = ref({})
onMounted(() => {
dim.value = getDimensions()
// adding the event listener...
window.addEventListener('resize', debounce(() => {
// ...but how to properly remove it later?
console.log('resize')
dim.value = getDimensions()
}, 250))
})
function getDimensions () {
return {
w: window.innerWidth,
h: window.innerHeight
}
}
// generic debounce function
function debounce (func, wait) {
let timeout
return function executedFunction (...args) {
const later = () => {
timeout = null
func(...args)
}
clearTimeout(timeout)
timeout = setTimeout(later, wait)
}
}
return {
dim
}
}
});
app.mount("#app");.navbar {
position: fixed;
width: 100%;
height: 50px;
top: 0;
left: 0;
background-color: #555;
text-align: center;
}
p {
color: #fff;
}<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<div class="navbar">
<p>
<span>width: {{ dim.w + ' ' }}</span>
<span>| height: {{ dim.h }}</span>
</p>
</div>
</div>Any tips on removing the event listener correctly?
The technology I'm using is Vue 3 with Composition API.