Vue3使用hook封装媒体查询和事件监听的代码示例

export const useTheme = () => {
  // 首先创建媒体查询对象
  const themeMedia = matchMedia("(prefers-color-scheme: light)")
  // 根据查询结果设置对应的值
  const theme = ref(themeMedia.matches ? 'light' : 'dark')
  const onChange = (e: MediaQueryListEvent) => theme.value = e.matches ? 'light' : 'dark'
  watchEffect((onCleanup) => {
    //  然后建立监听事件
    themeMedia.addEventListener('change', onChange)
    // 并且在退出时取消监听
    onCleanup(() => themeMedia.removeEventListener('change', onChange))
  })
  return theme;
}

const theme = useTheme()
watchEffect(() => console.log(theme.value, 'theme'))

export const useMatchMedia = (query: string) => {
  const themeMedia = matchMedia(query)
  const match = ref(themeMedia.matches)
  const onChange = (e: MediaQueryListEvent) => match.value = e.matches
  watchEffect((onCleanup) => {
    themeMedia.addEventListener('change', onChange)
    onCleanup(() => themeMedia.removeEventListener('change', onChange))
  })
  return match
}

export const useTheme = () => {
  const theme = useMatchMedia("(prefers-color-scheme: light)")
  const theme = ref(themeMedia.matches ? 'light' : 'dark')
  return theme  ? 'light' : 'dark'
}

export const useEventListener = <K extends keyof WindowEventMap>(
  target: K,
  listener: (ev: WindowEventMap[K]) => any
) => {
  watchEffect((onCleanup) => {
    addEventListener(target, listener)
    onCleanup(() => removeEventListener(target, listener))
  })
}

export const useNetWork = () => {
  const isOnLine = ref(navigator.onLine)
  const setOnLine = () => isOnLine.value = true
  const setOffLine = () => isOnLine.value = false
  useEventListener('online', setOnLine)
  useEventListener('offline', setOffLine)
  return isOnLine
}

const isOnLine = useNetWork()
watchEffect(() => console.log(isOnLine.value, 'isOnLine'))
<h1 v-if="isOnLine">onLine</h1>
<h1 v-else>offLine</h1>

useEventListener('scroll', () => console.log('scroll'))

export const debounce = (
  fn: (...args: any[]) => void,
  delay: number
) => {
  let timer: NodeJS.Timeout
  return  (...args: any[]) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

useEventListener('scroll', debounce(() => console.log('scroll'), 200))