Vue3组合式函数监听窗口大小变化

import { ref, onMounted, onUnmounted } from 'vue'

/**
 * 窗口尺寸变化的组合式函数
 * 用于监听浏览器窗口大小变化，并返回响应式的宽高数据
 * 
 * @param {Function} callback - 窗口大小变化时的回调函数，会接收当前的宽度和高度作为参数
 * @param {boolean} immediate - 是否在组件挂载后立即执行一次回调，默认为 true
 * @returns {Object} 返回包含窗口宽高的响应式对象 { windowWidth, windowHeight }
 * 
 * @example
 * // 基础用法 - 只获取窗口宽高
 * const { windowWidth, windowHeight } = useWindowResize()
 * 
 * @example
 * // 带回调的用法
 * const { windowWidth, windowHeight } = useWindowResize((width, height) => {
 *   console.log(`窗口大小变化: ${width} x ${height}`)
 * })
 * 
 * @example
 * // 不立即执行回调
 * const { windowWidth, windowHeight } = useWindowResize(() => {
 *   // 只有在窗口变化时才会执行，挂载时不会执行
 * }, false)
 */
export function useWindowResize(callback, immediate = true) {
  // 创建响应式的窗口宽度和高度，初始值为当前窗口尺寸
  const windowWidth = ref(window.innerWidth)
  const windowHeight = ref(window.innerHeight)

  /**
   * 处理窗口大小变化的核心函数
   * 更新响应式数据，并触发用户传入的回调
   */
  const handleResize = () => {
    // 获取最新的窗口尺寸
    const currentWidth = window.innerWidth
    const currentHeight = window.innerHeight
    
    // 更新响应式数据（这些值的变化会自动触发视图更新）
    windowWidth.value = currentWidth
    windowHeight.value = currentHeight
    
    // 如果用户提供了回调函数，则执行回调并传入当前宽高
    if (callback) {
      callback(currentWidth, currentHeight)
    }
  }

  // 组件挂载时执行
  onMounted(() => {
    // 如果 immediate 为 true，立即执行一次 handleResize
    // 这样可以保证组件初始时就能得到正确的窗口尺寸
    if (immediate) {
      handleResize()
    }
    // 添加 resize 事件监听器，窗口大小变化时会自动调用 handleResize
    window.addEventListener('resize', handleResize)
  })

  // 组件卸载时执行（清理工作，防止内存泄漏）
  onUnmounted(() => {
    // 移除 resize 事件监听器
    // 这一步很重要！如果不移除，即使组件销毁了，监听器依然存在
    window.removeEventListener('resize', handleResize)
  })

  // 返回响应式的宽高数据，供组件使用
  return {
    windowWidth,   // 响应式的窗口宽度（ref 对象）
    windowHeight   // 响应式的窗口高度（ref 对象）
  }
}