V-If

Vue3中v-if与v-for结合时，v-if优先级高于v-for，同元素混用会导致每个项都执行条件判断，引发性能与逻辑问题。改进方案：用computed过滤数据后循环（适用于条件依赖循环项），或把v-if移至父元素（适用于条件不依赖循环项）。

Vue条件渲染核心指令：v-if（创建/销毁DOM）、v-else-if/v-else（多条件分支）、v-show（切换display），前者用于条件不常变场景，后者适用于频繁切换。响应式数据用ref/reactive创建，依赖变化触发DOM更新，复杂条件用计算属性优化，常见错误如v-else未紧跟需避免。

Vue3条件渲染可通过分组控制元素，配合v-if/v-else-if/v-else实现，避免冗余DOM节点。响应式数据（ref/reactive）驱动状态切换，如登录状态、角色权限。优势是保持DOM简洁。注意v-else-if需紧跟v-if/else-if，且template仅支持v-if系列，v-show不可用。

Vue3条件渲染通过v-if、v-else、v-else-if基于响应式数据控制DOM：v-if销毁/重建元素，v-else补充默认分支，v-else-if处理多分支。需注意v-else/v-else-if必须紧跟对应指令，多分支条件需按严格程度排序。与v-show（CSS控制隐藏）不同，v-if适合条件少变场景，v-show适合频繁切换场景。

Vue中的条件渲染通过v-if和v-show实现，v-if根据条件销毁或重建DOM，适合不频繁切换的场景；v-show通过CSS控制显隐，适合频繁切换的场景。列表渲染使用v-for遍历数组或对象，key属性确保节点正确复用，避免使用索引作为key。v-for与v-if不应同时使用，建议通过computed属性过滤数据后再渲染。

Vue 3中的指令是带有v-前缀的特殊属性，用于将数据与DOM元素绑定。v-bind用于动态绑定属性，如src、class等，支持简写语法:。v-on用于监听事件，如click，简写为@，支持事件修饰符如.prevent。v-if根据条件销毁或重建DOM，v-show通过修改display属性控制显示。v-for用于循环渲染，需使用唯一key。常见报错包括未 …