vue中监听window.resize事件

提取监听的添加与移除逻辑，封装成hook使用

@/use/useResizeListener.js

import { onMounted, onBeforeUnmount } from 'vue'

export default cb => {
  if (typeof cb !== 'function') return

  const resizeDebounceHandler = debounce(cb)

  onMounted(() => {
    window.addEventListener('resize', resizeDebounceHandler)
  })
  onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeDebounceHandler) // 监听事件解绑
  })
}

function debounce(fn, delay = 200) {
  let timer
  return function () {
    let args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn(...args)
    }, delay)
  }
}

@/**/sfc.vue

<script setup>
import useResizeListener from '@/use/useResizeListener'

const resizeHandler = () => console.log('do something')

useResizeListener(resizeHandler)
</script>