vue3 监听resize窗口事件并防抖动,离开页面要销毁窗口事件

resize事件是改变窗口大小时发生的事件，可以在窗口开启、最大化、最小化、窗口大小改变（如拖拉改变窗口大小、move语句改变窗口大小、改变width或height属性以改变窗口大小）时发生。

1.监听浏览器窗口变化，实时获取该窗口的宽度和高度

//封装getWindowInfo()方法
const getWindowInfo = () => {
    const windowInfo = {
        width: window.innerWidth,
        hight: window.innerHeight
    }
    console.log(windowInfo);
};

2.监听 resize 事件

//通过window监听
window.addEventListener('resize', getWindowInfo);
//缺点是会频繁触发这个事件，造成页面卡顿，优化的方法使用防抖或节流。

优化后的方法：
防抖debounce：在事件触发n秒后再执行，如果在n秒内又有新的触发，就重新计算
节流throttle：连续事件触发，在指定的时间内，不管触发几次，就只执行一次

//使用防抖 (setTimeout定时器)
const getWindowInfo = () => {
    const windowInfo = {
        width: window.innerWidth,
        hight: window.innerHeight
    }
};
const debounce = (fn, delay) => {
    let timer;
    return function() {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn();
        }, delay);
    }
};
//触发事件    触发时间（指定时间内执行事件）
const cancalDebounce = debounce(getWindowInfo, 500);
window.addEventListener('resize', cancalDebounce);

//vue3 使用生命周期销毁钩子
onUnmounted(() => {
        console.log('onUnmounted','打印是否生效');
        //移除监听事件
        window.removeEventListener('resize', cancalDebounce);
})

参考：https://blog.csdn.net/weixin_46409887/article/details/129028214