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

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

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

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

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

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

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

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

示例：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

{{ item.name }}

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

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

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

• 用 v-if 控制包裹 v-for 的父元素（如
  、

  或

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！