useBreakpoints 介绍

📋 这是什么？

useBreakpoints 是 VueUse 的组合式函数，用于响应式地检测和匹配 CSS 断点。

🎯 核心作用

根据窗口宽度自动检测当前设备尺寸，实现响应式布局。

💡 基本用法

import { useBreakpoints } from '@vueuse/core'

// 定义断点
const breakpoints = useBreakpoints({
  sm: 640,    // 小屏幕
  md: 768,    // 中等屏幕
  lg: 1024,   // 大屏幕
  xl: 1280,   // 超大屏幕
  '2xl': 1536 // 2倍超大屏幕
})

// 获取当前断点状态
const isMobile = breakpoints.smaller('sm')  // 宽度 < 640px
const isTablet = breakpoints.between('sm', 'lg')  // 640px ≤ 宽度 < 1024px
const isDesktop = breakpoints.greater('lg')  // 宽度 ≥ 1024px

📊 常用方法

💡 实际应用场景

1. 设备管理界面适配

// 设备列表响应式配置
export function useDeviceListLayout() {
  const breakpoints = useBreakpoints({
    mobile: 0,
    tablet: 768,
    desktop: 1024
  })

  // 响应式配置
  const layoutConfig = computed(() => {
    if (breakpoints.smaller('tablet')) {
      return {
        columns: 1,          // 1列
        cardSize: 'small',   // 小卡片
        showDetails: false,  // 隐藏详情
        showActions: 'icon'  // 图标按钮
      }
    } else if (breakpoints.smaller('desktop')) {
      return {
        columns: 2,
        cardSize: 'medium',
        showDetails: true,
        showActions: 'text'
      }
    } else {
      return {
        columns: 3,
        cardSize: 'large',
        showDetails: true,
        showActions: 'both'
      }
    }
  })

  return { layoutConfig }
}

2. 侧边栏响应式控制

// 侧边栏响应式行为
export function useSidebar() {
  const breakpoints = useBreakpoints({
    mobile: 0,
    tablet: 768
  })

  const sidebarStore = useSidebarStore()

  // 自动关闭侧边栏（移动端）
  watch(breakpoints.smaller('tablet'), (isMobile) => {
    if (isMobile) {
      sidebarStore.collapse()
    } else {
      sidebarStore.expand()
    }
  })

  // 响应式侧边栏宽度
  const sidebarWidth = computed(() => {
    return breakpoints.smaller('tablet') ? 60 : 200
  })

  return { sidebarWidth }
}

🔄 与 CSS Media Query 对比

CSS Media Query

/* 传统方式 */
@media (max-width: 768px) {
  .container { grid-template-columns: 1fr; }
}

useBreakpoints

// VueUse 方式
const isMobile = breakpoints.smaller('md')
const columns = computed(() => isMobile.value ? 1 : 3)

🎯 响应式数据展示

设备数据表格

<script setup>
import { useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints({
  sm: 640,
  md: 768,
  lg: 1024
})

// 响应式显示的列
const visibleColumns = computed(() => {
  if (breakpoints.smaller('sm')) {
    return ['name', 'status']  // 移动端：只显示关键列
  } else if (breakpoints.smaller('md')) {
    return ['name', 'type', 'status', 'lastSeen']  // 平板：显示更多
  } else {
    return ['name', 'type', 'status', 'location', 'lastSeen', 'actions']  // 桌面：显示所有
  }
})

// 响应式操作按钮
const actionType = computed(() => {
  return breakpoints.smaller('sm') ? 'icon' : 'text'
})
</script>

<template>
  <NDataTable
    :columns="filteredColumns"
    :data="devices"
  >
    <!-- 响应式操作按钮 -->
    <template #action="{ row }">
      <NButton v-if="actionType === 'icon'" :icon="ViewIcon" />
      <NButton v-else>查看详情</NButton>
    </template>
  </NDataTable>
</template>

⚡ 性能优化

1. 节流监听

// 默认有节流，避免频繁触发
const breakpoints = useBreakpoints(
  { sm: 640, md: 768, lg: 1024 },
  { 
    window, 
    throttle: 100  // 100ms 节流
  }
)

2. 懒计算

// 使用 computed 延迟计算
const layout = computed(() => {
  if (!breakpoints.current.value) return null
  return calculateLayout(breakpoints.current.value)
})

📊 浏览器支持

• ✅ Chrome 51+
• ✅ Firefox 54+
• ✅ Safari 10+
• ✅ Edge 79+
• ❌ IE 不支持

📋 总结

useBreakpoints 是 VueUse 的响应式断点工具，它能：

1. ✅ 实时检测屏幕尺寸：响应窗口变化
2. ✅ 提供丰富API：大于、小于、区间判断
3. ✅ 支持自定义断点：灵活配置
4. ✅ 响应式计算：与 Vue 响应式系统集成
5. ✅ 优化性能：内置节流