Vue3+vite 项目中使用 VueUse 的 useMediaQuery 实现响应式设计

1. 初识响应式设计新境界

在某个寻常的加班夜晚，笔者正对着设计师提供的6种不同尺寸的设计稿发愁。从1920px的超宽屏到320px的竖屏手机，传统CSS媒体查询堆砌的方案让代码逐渐臃肿。正当准备妥协使用第三方UI框架时，VueUse库中的useMediaQuery像一束光点亮了黑夜——这个组合式API不仅能以声明式语法管理响应逻辑，还能与Vue3的响应式系统完美融合。

2. 环境配置与基础用法

2.1 技术栈准备

本次示例统一使用以下技术栈：

• Vue3.3+
• Vite5.0+
• VueUse9.0+
• TypeScript5.0+

安装命令：

npm install @vueuse/core

2.2 第一个响应式示例

<script setup lang="ts">
import { useMediaQuery } from '@vueuse/core'

// 检测视口是否小于768px（移动端断点）
const isMobile = useMediaQuery('(max-width: 768px)')

// 动态调整布局类名
const layoutClass = computed(() => ({
  'mobile-layout': isMobile.value,
  'desktop-layout': !isMobile.value
}))
</script>

<template>
  <div :class="layoutClass">
    <!-- 响应式导航栏 -->
    <nav v-if="!isMobile">桌面导航菜单</nav>
    <div v-else class="hamburger-menu">≡</div>
    
    <!-- 自适应内容区域 -->
    <main :class="{ 'p-2': isMobile, 'p-8': !isMobile }">
      {{ isMobile ? '移动端视图' : '桌面端视图' }}
    </main>
  </div>
</template>

这个示例展示了三个典型应用场景：

1. 条件渲染不同的导航组件
2. 动态绑定CSS类名
3. 根据设备调整内边距

3. 进阶实战案例

3.1 多断点监测系统

// breakpoints.ts
export const breakpoints = {
  sm: '(min-width: 640px)',
  md: '(min-width: 768px)',
  lg: '(min-width: 1024px)',
  xl: '(min-width: 1280px)',
  dark: '(prefers-color-scheme: dark)'
}

// 在组件中使用
const currentBreakpoint = ref('xs')
const isDarkMode = useMediaQuery(breakpoints.dark)

// 创建断点观察器
Object.entries(breakpoints).forEach(([key, query]) => {
  const matches = useMediaQuery(query)
  watch(matches, value => {
    if (value) currentBreakpoint.value = key
  })
})

这段代码实现了：

• 预设多种常见断点
• 自动追踪当前匹配的断点
• 支持暗色模式检测

3.2 实时视口报告器

<script setup lang="ts">
import { useMediaQuery } from '@vueuse/core'

// 动态视口监控
const viewportReport = reactive({
  width: useMediaQuery('(width)'),
  height: useMediaQuery('(height)'),
  orientation: useMediaQuery('(orientation: portrait)') 
    ? 'portrait' 
    : 'landscape'
})

// 设备特征检测
const deviceDetails = {
  isRetina: useMediaQuery('(-webkit-min-device-pixel-ratio: 2)'),
  isTouchDevice: useMediaQuery('(hover: none) and (pointer: coarse)')
}
</script>

这个方案可以实时获取：

• 精确视口尺寸
• 设备方向
• 屏幕密度
• 交互方式

4. 关联技术探秘

4.1 与CSS-in-JS的化学反应

结合UnoCSS实现动态样式：

<script setup>
const isMobile = useMediaQuery('(max-width: 768px)')

const dynamicStyle = computed(() => ({
  fontSize: isMobile.value ? '14px' : '16px',
  gridColumns: isMobile.value ? 1 : 3
}))
</script>

<template>
  <div 
    :class="[
      isMobile ? 'flex-col' : 'flex-row',
      isMobile ? 'gap-y-4' : 'gap-x-8'
    ]"
    :style="{
      '--scale-factor': isMobile ? 0.8 : 1
    }"
  >
    <!-- 动态样式块 -->
  </div>
</template>

4.2 状态管理的优雅集成

在Pinia中创建响应式状态：

// stores/viewport.ts
export const useViewportStore = defineStore('viewport', () => {
  const isMobile = useMediaQuery('(max-width: 768px)')
  const isTablet = useMediaQuery('(max-width: 1024px)')
  
  return { 
    isMobile,
    isTablet,
    isDesktop: computed(() => !isMobile.value && !isTablet.value)
  }
})

5. 深度技术剖析

5.1 核心实现原理

useMediaQuery的内部工作机制包含三个关键阶段：

1. 初始化阶段：创建MediaQueryList对象并注册监听
2. 响应式绑定：将匹配结果转换为ref类型
3. 自动清理：在组件卸载时移除事件监听

5.2 性能优化指南

对于多断点监听场景推荐采用以下优化策略：

// 优化前：多个独立查询
const isMobile = useMediaQuery('(max-width: 768px)')
const isLandscape = useMediaQuery('(orientation: landscape)')

// 优化后：组合查询
const combinedQuery = useMediaQuery(
  '(max-width: 768px) and (orientation: landscape)'
)

6. 应用场景全景图

6.1 典型使用案例

• 电商平台的商品列表布局切换
• 后台管理系统的侧边栏折叠
• 在线教育的课件播放器适配
• 数据可视化大屏的自动缩放

6.2 创新应用模式

• 结合WebGL的3D场景渲染优化
• 智能表单的布局重构
• 实时数据看板的图表切换
• 渐进式增强的功能加载

7. 技术选型对比

7.1 与传统方案的较量

传统CSS媒体查询：

.container {
  padding: 20px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

VueUse方案优势：

• 逻辑集中管理
• 支持复杂条件判断
• 与组件生命周期绑定

7.2 同类方案对比

8. 避坑指南

8.1 常见问题排查

• 闪烁问题：在SSR场景中使用useMediaQuery时，初始状态需要通过clientOnly组件包裹
• 性能抖动：避免在列表渲染中直接使用媒体查询，建议提升状态到父组件
• 条件冲突：多个查询条件出现范围重叠时需使用逻辑运算符明确优先级

8.2 最佳实践建议

// 推荐：将查询条件集中管理
const BREAKPOINTS = {
  MOBILE: '(max-width: 767px)',
  TABLET: '(min-width: 768px) and (max-width: 1023px)',
  DESKTOP: '(min-width: 1024px)'
}

// 推荐：使用watchEffect处理复杂逻辑
watchEffect(() => {
  if (isMobile.value) {
    router.replace('/mobile-version')
  }
})

9. 总结与展望

useMediaQuery为响应式开发开启了新的可能性，但同时也需要注意避免滥用。对于简单布局调整仍建议优先使用CSS方案，而在需要复杂逻辑判断或动态功能切换时，组合式API方案则更显优势。随着VueUse的持续迭代，未来可能加入查询条件动态更新、性能优化模式等新特性。