布尔值控制组件切换是最轻量可控的“硬切”方式，通过视口宽度阈值（如768px）一次性判定mobile/pc模式，不依赖ua或matchmedia监听，vue中用ref初始化+ v-if实现，需注意ssr fallback和初始渲染时机。
直接用布尔值控制组件切换，是最轻量、最可控的“硬切”方式。它不依赖复杂的响应式监听或服务端判断，只在页面加载或尺寸变化时，用一个明确的 true/false 决定渲染哪一套 UI。
核心思路：用设备宽度阈值生成布尔标志
关键不是“检测手机还是电脑”，而是“当前视口是否小于某个业务定义的临界值”。比如把 768px 作为分水岭：≤768px 视为移动端，>768px 视为 PC 端。这个值写死在代码里，不查 UA，不调 API，简单可靠。
- 避免 UA 字符串解析——UA 易伪造、不可靠，且现代浏览器已限制部分字段
- 不依赖 window.matchMedia 的持续监听——硬切只需初始判断，无需实时响应缩放
- 阈值应基于内容可读性设定，而非某款设备——例如表格能清晰显示的最小宽度，就是你的断点
Vue 中的典型实现（组合式 API）
在页面入口组件或布局组件中，用 ref 存一个布尔值，初始化时根据 innerWidth 判断：
- 在 setup() 中执行一次判断：const isMobile = ref(window.innerWidth
- 配合 onMounted 和 onUnmounted，可选加 resize 监听（仅当需支持窗口手动拉伸时）
- 模板中用 v-if 分支：
搭配 TypeScript 提升类型安全
把布尔判定逻辑封装成可复用的工具函数，并导出类型：
- 定义类型：type DeviceMode = 'mobile' | 'pc';
- 封装函数：export const getDeviceMode = (): DeviceMode => window.innerWidth
- 组件内使用：const mode = ref
(getDeviceMode());
注意事项与边界处理
硬切逻辑看似简单，但几个细节容易出错：
- SSR 场景下 window 未定义——服务端渲染时需 fallback 到默认值（如 'pc'），或延迟到客户端 hydrate 后再判定
- 初始判断时机要早——放在根组件 setup 或 App.vue 的 beforeMount 阶段，避免闪屏（先渲染 PC 再切 Mobile）
- 不建议在路由守卫里做硬切跳转——同 URL 下切换组件更干净，避免地址栏跳变和 history 堆栈污染
