v-if是条件渲染（销毁/重建dom），v-show是条件显示（仅切换display样式）；v-if适用于不常切换的场景如权限区域、表单非当前步，v-show适用于高频切换如折叠面板。
核心是让 Vue 少做“重绘”和“重排”，而不是手动去删 DOM 节点。它靠的是虚拟 DOM + 精准更新机制，关键在于写法配合框架逻辑。
用好 v-if 和 v-show 的区别
v-show 只切 display 样式，元素始终在 DOM 中；v-if 是彻底销毁/重建节点。如果某块内容长期不显示（比如弹窗默认关闭、表单步骤未走到），优先用 v-if，能从根源上减少挂载的 DOM 节点数。
- 适合 v-if：权限控制区域、多步骤表单的非当前步、错误提示框（多数时间不出现）
- 避免滥用 v-if：高频切换的开关（如折叠面板），反复销毁重建反而开销大
列表渲染必须带 key，且 key 要稳定唯一
Vue 靠 key 来识别节点身份。key 重复或用 index 作 key，会导致复用错乱，触发本可避免的 DOM 替换或移动。
- ✅ 正确：`:key="item.id"`（id 是后端返回的稳定唯一标识）
- ❌ 危险：`:key="index"`（数组顺序变化时，key 绑定错位）
- ❌ 错误：`:key="Math.random()"`（每次渲染 key 都变，强制全量重建）
静态内容加 v-once，跳过响应式追踪
那些确定不会变的文字、图片地址、配置说明等，加上 v-once 后，Vue 渲染一次就不再监听，也不参与后续 diff，直接省掉这部分虚拟 DOM 对比和更新流程。
示例：<p v-once>版本号：v2.4.1</p> —— 启动后永远不变，不占响应式系统资源。
拆分组件 + 使用 keep-alive 缓存状态
把长页面或标签页拆成独立子组件，再用
- 适用场景：Tab 页签、用户个人中心各模块、搜索结果页与详情页来回跳转
- 注意：不要无差别包裹所有组件，会增加内存占用；可配合 include/exclude 精准控制缓存范围
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
