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 绑定到这个计算属性，不再承担判断职责；
- 既语义清晰，又避免重复遍历，还能享受响应式更新。
示例：
立即学习“前端免费学习笔记（深入）”；
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
const completedTasks = computed(() => taskList.value.filter(t => t.isComplete));
需要整体控制显示/隐藏时，把 v-if 移到外层容器
当你的需求是「整个列表要不要出现」，而不是「列表里哪些项要出现」，那就不要让 v-if 和 v-for 竞争同一元素：
- 用 v-if 控制包裹 v-for 的父元素（如 <section>、<div> 或 <template>）；
- v-for 只负责内部循环，逻辑职责分明；
- 避免 item 在 v-if 中被引用时还未定义的问题。
示例：
立即学习“前端免费学习笔记（深入）”；
<div v-if="showTaskList"><div v-for="item in taskList" :key="item.id">{{ item.name }}</div>
</div>
v-if 和 v-show 的选择也要看场景
如果只是频繁切换显隐（比如折叠面板、标签页），别用 v-if：
- v-if 是“销毁-重建”，适合低频、重量级组件（如登录弹窗、表单步骤）；
- v-show 是“display: none”，适合高频、轻量展示（如开关按钮、状态提示）；
- 错误地用 v-if 控制快速切换的 UI 元素，会导致卡顿、状态丢失、事件监听器反复绑定。
