Vue 基础如何使用条件渲染和列表渲染的优先级避坑指南

v-if 和 v-for 不应写在同一元素上，因 v-for 优先执行，导致性能浪费和潜在报错；正确做法是用计算属性预过滤数据或把 v-if 移至外层容器。

Vue 中条件渲染（v-if）和列表渲染（v-for）同时出现时，关键避坑点就一个：v-for 总是先执行，v-if 再逐项判断。这通常不是异常，而是明确的优先级规则——但直接写在同一元素上，容易引发性能浪费甚至运行报错。

为什么不能把 v-if 和 v-for 写在同一个标签上

Vue 2 和 Vue 3 都遵循「v-for 优先级高于 v-if」。这意味着：

1. 哪怕你只想渲染 5 条数据，Vue 也会先把整个数组（比如 1000 条）全部循环一遍，再对每一条执行 v-if 判断；
2. 如果 v-if 的条件依赖了父级作用域变量（如 showList），而数组为空或 item 未定义，v-if 表达式可能访问 undefined 属性，导致控制台报错；
3. Vue 3 会直接在浏览器控制台抛出警告：“v-if and v-for are incompatible and should not be used on the same element.”

正确写法：用计算属性预过滤数据

把筛选逻辑提前到 JavaScript 层，让 v-for 只处理最终要渲染的数据：

1. 定义 computed 属性，用 filter() 提前筛出符合条件的项；
2. v-for 绑定到这个计算属性，不再承担判断职责；
3. 既语义清晰，又避免重复遍历，还能享受响应式更新。

示例：

const completedTasks = computed(() => taskList.value.filter(t => t.isComplete));

需要整体控制显示/隐藏时，把 v-if 移到外层容器

当你的需求是「整个列表要不要出现」，而不是「列表里哪些项要出现」，那就不要让 v-if 和 v-for 竞争同一元素：

1. 用 v-if 控制包裹 v-for 的父元素（如 <section>、<div> 或 <template>）；
2. v-for 只负责内部循环，逻辑职责分明；
3. 避免 item 在 v-if 中被引用时还未定义的问题。

示例：

v-if 和 v-show 的选择也要看场景

如果只是频繁切换显隐（比如折叠面板、标签页），别用 v-if：

1. v-if 是“销毁-重建”，适合低频、重量级组件（如登录弹窗、表单步骤）；
2. v-show 是“display: none”，适合高频、轻量展示（如开关按钮、状态提示）；
3. 错误地用 v-if 控制快速切换的 UI 元素，会导致卡顿、状态丢失、事件监听器反复绑定。