vue 3 的 computed 不直接检测断点，而是通过响应式 ref（如 windowwidth）封装断点逻辑，自动追踪并高效重算；需避免在 computed 中读取 dom 或执行副作用，推荐结合 typescript 提升类型安全。
Vue 3 的 computed 本身不直接“检测断点”，但它能高效封装和响应断点状态变化——关键在于把断点判定逻辑（如窗口宽度比对）的响应式源头交给 ref 或 reactive，再用 computed 做干净、可复用的布尔判断或分类计算。
用 ref 存储当前视口宽度，computed 封装断点条件
这是最轻量、可控性最强的方式。不依赖第三方库，适合简单断点或需要精确控制时机的场景：
- 定义
const windowWidth = ref(window.innerWidth)作为响应式源头 - 在
onMounted中监听resize并更新windowWidth.value - 用
computed写清晰的断点逻辑，例如：
这些计算属性会自动追踪 windowWidth，且只在宽度跨过阈值时重新求值，模板中可直接使用 v-if="isMobile" 或 :class="{ mobile: isMobile }"。
结合 useBreakpoints（VueUse）让 computed 处理更复杂状态
useBreakpoints 返回的是一个工具对象，它的方法（如 greaterOrEqual、between）本身返回 ComputedRef<boolean></boolean>，本质上就是基于 computed 构建的。你可以进一步用 computed 组合它们：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 比如判断是否处于“移动端 + 横屏”状态：
const isMobileLandscape = computed(() => isMobile.value && window.orientation === 90) - 或聚合多个断点为布局模式：
const layoutMode = computed(() => {
if (breakpoints.smaller('sm').value) return 'compact'
if (breakpoints.between('md', 'xl').value) return 'balanced'
return 'expanded'
})
这样既复用了 VueUse 的媒体查询封装，又通过 computed 实现了语义化、可测试的状态派生。
避免在 computed 中读取 DOM 或执行副作用
断点判定必须基于已知的响应式数据源。以下写法是错误的：
- ❌ 在
computed函数里调用document.documentElement.clientWidth—— 它不是响应式源，无法触发重计算 - ❌ 在
computed里修改ref、发起请求、跳转路由 —— 计算属性只应返回值，不能有副作用 - ✅ 正确做法：把 DOM 读取放在
onMounted+watchEffect或 resize 监听器中，只把结果赋给一个ref，再由computed消费这个ref
配合 TypeScript 提升类型安全与可维护性
定义断点键名类型后，computed 的返回值也能获得精准推导：
type Breakpoint = keyof typeof breakpoints
const currentBreakpoint = computed
const w = windowWidth.value
return Object.entries(breakpoints)
.sort(([, a], [, b]) => b - a)
.find(([, v]) => w >= v)?.[0] as Breakpoint || 'xs'
})
此时 currentBreakpoint.value 是字面量联合类型 'xs' | 'sm' | ...，可用于 switch 分支或动态 class 名，IDE 也能提供完整提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
