用 watchEffect 响应窗口尺寸变化，需将 window.innerWidth/Height 封装为 ref 并手动更新，配合节流、状态驱动视图和 CSS 布局切换，避免直接操作 DOM 或重任务。
用 watchEffect 处理窗口尺寸变化，关键不是“监听 window.innerWidth”，而是把它变成 Vue 能追踪的响应式信号——再让副作用逻辑干净、可控地响应它。
把屏幕宽高转成响应式数据
浏览器原生的 window.innerWidth 是普通值，watchEffect 无法自动追踪。必须用 ref 包一层，并在 resize 时手动更新：
- 定义
const width = ref(window.innerWidth)和const height = ref(window.innerHeight) - 在
onMounted中绑定resize事件，每次触发都更新这两个 ref 的.value - 务必在
onUnmounted中解绑，防止内存泄漏
在 watchEffect 里做轻量状态决策
watchEffect 的作用是“当依赖变了，就执行一段逻辑”。这里不建议直接操作 DOM 或调图表 API，而是聚焦于更新组件内部的状态：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 例如声明
const layoutMode = ref('desktop')，然后在watchEffect中按断点赋值：layoutMode.value = width.value - 模板中用
v-if或:class绑定layoutMode，让视图层保持声明式 - 需要触发重绘（如 ECharts）时，改用
nextTick+chart.resize()，确保 DOM 已更新
加节流防高频触发
resize 事件可能每秒几十次，watchEffect 虽有内部优化，但业务逻辑若涉及计算或重绘，仍需防护：
立即学习“前端免费学习笔记（深入）”；
- 用
setTimeout或requestAnimationFrame包裹width.value = ...的赋值，实现简单节流 - 或封装为自定义 Hook（如
useThrottledRef），复用更安全 - 避免在
watchEffect内部发起网络请求、初始化大型实例等重操作
配合 CSS 实现布局切换更高效
比起 JS 动态增删 class，推荐用响应式 class 绑定驱动 CSS 变化：
- 模板写
:class="{ 'is-mobile': layoutMode === 'mobile', 'is-desktop': layoutMode === 'desktop' }" - CSS 中定义
.is-mobile .sidebar { display: none; }、.is-desktop .main { grid-template-columns: 250px 1fr; } - 全屏场景下还可结合
body样式控制：全屏时加overflow: hidden，退出时还原
