v-if 用于低频切换的条件渲染，v-show 适合高频切换，v-for 渲染数组需配 :key，遍历对象时用 (value, key, index)，template 上组合 v-if 与 v-for 需避免同元素使用。
一、使用 v-if 实现条件渲染
v-if 指令根据表达式的布尔值决定是否将元素插入或移除 DOM，适用于切换频率较低的场景，能有效减少初始渲染的 DOM 节点数量。
1、在模板中编写带有 v-if 的元素，例如：
2、为 v-if 添加配套的 v-else-if 和 v-else 分支，确保它们连续书写，中间不插入其他元素
3、当需要同时控制多个元素的显示/隐藏时，在 标签上使用 v-if，该标签本身不会被渲染到页面中
立即学习“前端免费学习笔记（深入）”；
二、使用 v-show 实现条件渲染
v-show 通过切换 CSS 的 display 属性控制元素可见性，DOM 元素始终存在，适合高频切换的场景，避免重复创建和销毁节点带来的性能开销。
1、在目标元素上添加 v-show="isVisible" 指令
2、确保绑定的数据属性（如 isVisible）在 Vue 实例 data 中正确定义并可响应式更新
3、注意 v-show 不支持与 或 v-else 搭配使用
三、使用 v-for 渲染数组列表
v-for 指令用于遍历数组并为每个元素生成对应的 DOM 结构，必须配合 :key 属性以维持列表状态稳定，避免就地复用导致的渲染异常。
1、在元素上声明 v-for="(item, index) in list" :key="item.id"，其中 item 是当前项，index 是索引
2、若源数据无唯一 id，可使用 :key="index" 作为备选，但仅限于静态、不可排序的列表
3、对列表进行过滤或排序操作时，应避免直接在 v-for 中使用 v-if，而是通过计算属性返回新数组
四、使用 v-for 渲染对象属性
v-for 可遍历对象的键值对，其参数顺序为 (value, key, index)，适用于动态展示配置项、表单字段等结构化数据。
1、在模板中使用 v-for="(value, key, index) in userInfo" :key="key"
2、确保对象属性名可作为合法的 key 值，或显式拼接字符串如 :key="'user-' + key"
3、若需按特定顺序渲染，应在 JavaScript 层预处理对象，例如使用 Object.entries() 并排序后再传入模板
五、在 template 上组合使用 v-if 与 v-for
当需对一组元素整体应用条件控制时， 提供了语义清晰且不污染 DOM 的包裹方式，但需注意 v-if 与 v-for 同时出现时的优先级问题。
1、将 v-if 移至 标签上，内部放置多个待控制的元素
2、避免在同一元素上同时使用 v-if 和 v-for，否则 v-if 将无法访问 v-for 作用域内的变量
3、若必须联合使用，先用 包裹循环体，再在外层嵌套
