v-if 和 v-show 机制不同：v-if 是条件渲染，销毁/重建 DOM；v-show 是条件显示，仅切换 display 样式。频繁切换用 v-show，初始不渲染或重型组件用 v-if，二者不可混用同一元素。
v-if 和 v-show 看似都能控制元素显隐，但底层机制完全不同：v-if 是“条件渲染”，切换时真正销毁/重建 DOM；v-show 是“条件显示”，仅通过 CSS 的 display: none 切换可见性。性能差异就源于此——不是谁更快，而是谁更适合当前场景。
频繁切换时优先用 v-show
如果一个元素需要反复显示/隐藏（比如模态框、下拉菜单、Tab 面板），v-show 更合适。它只改变样式，不触发组件的创建/销毁流程，没有编译、挂载、响应式初始化等开销。
- 适合按钮点击触发的弹窗、鼠标悬停展开的导航栏、左右切换的轮播项
- 子组件内有定时器、事件监听或异步请求时，v-if 可能导致重复注册或内存泄漏，v-show 能保持状态稳定
- 注意：v-show 对初始为 false 的元素仍会渲染 DOM，只是隐藏，所以首次加载略重
条件复杂或初次渲染概率低时选 v-if
v-if 支持完整的 JavaScript 表达式，支持与 v-else / v-else-if 连用，且具备惰性：条件为假时，内部模板根本不会解析、编译，也不会创建组件实例。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 适合权限控制（如管理员专属操作按钮）、表单步骤（第 3 步内容在用户未走到前完全不加载）
- 包含重型子组件（如图表库、富文本编辑器、视频播放器）时，v-if 可显著减少首屏资源消耗
- 若条件依赖响应式数据但变化极少（如用户登录态），也建议用 v-if，避免无谓的 display 切换
不能混用的边界情况要警惕
v-if 和 v-show 不能作用于同一元素，否则 v-if 会生效，v-show 被忽略——Vue 会以 v-if 为优先级最高指令。
立即学习“前端免费学习笔记（深入）”；
- 动态组件（
<component :is="..."/>）默认用 v-if 逻辑，想强制复用需配合<keep-alive> - 表格行（
<tr>）等对 DOM 结构敏感的标签，v-show 在某些浏览器中可能因 display: none 导致布局异常，此时 v-if 更稳妥 - 服务端渲染（SSR）中，v-show 渲染出的隐藏元素仍存在于 HTML 中，可能影响 SEO 或初始语义结构，v-if 则彻底剔除
真实项目中的组合策略
单一指令往往不够用。常见做法是：用 v-if 做粗粒度控制，v-show 做细粒度交互。
- 例如：用户未登录时不渲染整个侧边栏（v-if），登录后侧边栏内各菜单项的展开收起用 v-show
- 再如：表单页用 v-if 控制“地址模块”是否出现（根据国家选择），模块内部省市联动下拉框的显隐用 v-show
- 性能敏感页面可借助 Vue Devtools 查看组件实例数量和激活状态，验证指令是否按预期工作
