在 vue 中，v-for 和 v-if 不能一起使用，因为 v-for 优先级高于 v-if，导致 v-if 在每次循环中重复判断，影响性能并引发逻辑混乱。1. 优先级问题：v-for 先执行，v-if 后执行，造成条件判断在循环中反复运行；2. 作用域问题：v-for 创建新作用域，v-if 控制渲染时可能失效或难以理解；3. 推荐做法包括过滤数据源（如用 computed 属性预处理）、使用 template 包裹元素、避免在同一元素混用指令；4. 性能优化应通过提前过滤数据实现，而非依赖 v-if 控制渲染。正确做法是让模板只负责展示，数据逻辑交由 JS 处理。
在 vue 中，
v-for
和
v-if
不能同时用在一个元素上，是因为它们的优先级和编译机制存在冲突。官方文档也明确建议不要这样做，否则可能导致意想不到的结果。
简单来说，
v-for
的优先级比
v-if
高。当你把两者写在同一个元素上时，
v-for
会先执行，然后才是
v-if
。这意味着
v-if
会在每次循环中都进行判断，这不仅可能影响性能，还容易造成逻辑混乱。
为什么不能一起用？
我们来具体看看背后的原因：
立即学习“前端免费学习笔记（深入）”；
-
优先级问题：Vue 在编译模板时，会先处理
v-for
，再处理
v-if
。也就是说，即使你写了
v-if="someCondition"
，它也会在每一次循环中被重新判断。
-
作用域问题：
v-for
会创建一个新的作用域，而
v-if
是在该作用域之外控制是否渲染元素。如果强行结合使用，可能会导致条件判断失效或难以理解。
举个例子：
<ul> <li v-for="item in items" v-if="item.isActive"> {{ item.name }} </li> </ul>
这个写法虽然能运行，但 Vue 会在控制台给出警告，并且内部其实是将
v-if
移动到了一个包裹
<template>
标签上，相当于：
<template v-for="item in items"> <li v-if="item.isActive"> {{ item.name }} </li> </template>
推荐做法
如果你确实需要根据条件筛选列表项，有几种更清晰、推荐的方式：
-
过滤数据源（推荐）：在
data
或
computed
中处理过滤逻辑，让模板只负责展示。
computed: { activeItems() { return this.items.filter(item => item.isActive); } }模板里直接用：
<li v-for="item in activeItems">{{ item.name }}</li> -
使用
<template>
包裹：如果你想保留
v-if
控制整个列表是否渲染，可以用
<template>
套在外面。
<template v-if="items.length > 0"> <li v-for="item in items">{{ item.name }}</li> </template> -
避免在同一个元素上混用：这是最简单的原则，别把
v-if
和
v-for
写在一起。
性能方面的小提醒
很多人以为在
v-for
里加个
v-if
可以减少 dom 元素数量，其实不是最优方式。因为即便最终没显示，
v-for
已经跑了一遍。真正高效的做法是通过
computed
提前过滤好数据，这样循环的次数就减少了。
比如：
// 不推荐 <li v-for="item in items" v-if="item.isActive">...</li> // 推荐 <li v-for="item in activeItems">...</li>
后者不仅结构清晰，而且性能更好。
基本上就这些。记住一句话：
v-for
和
v-if
别放一块儿，数据过滤交给 JS，模板只做展示。
