v-for 和 v-if 不应同时作用于同一元素，因 v-for 优先级更高，导致每次循环都执行 v-if，引发性能下降、响应式陷阱和可读性差；推荐用计算属性预过滤数据，或在 v-for 内部使用 v-if 分支。

在 Vue.js 模板中，v-for 和 v-if 不应同时作用于同一个元素，这是 Vue 官方明确推荐的规范。因为 v-for 的优先级高于 v-if，当两者共存时，v-if 会在每次循环中被重复执行，不仅影响性能，还容易引发逻辑混乱和渲染异常。

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

Vue 的编译机制会把 v-for 视为更高优先级的指令，先展开列表、再对每个子项执行 v-if 判断。这意味着：即使你只想渲染少数符合条件的项，Vue 仍会为整个原始数组创建大量中间 vnode（即使最终被 v-if 过滤掉），造成不必要的内存开销和响应式追踪负担。

• 性能下降：遍历 + 判断次数 = 原始数组长度 × 渲染开销
• 响应式陷阱：若过滤条件依赖响应式数据，每次更新都可能触发全量重渲染
• 可读性差：逻辑耦合，难以维护和调试

推荐做法：用计算属性预过滤数据

将条件判断前置到 JavaScript 层，用 计算属性（computed） 返回已过滤的数组，再在模板中仅使用 v-for 渲染。这样既清晰又高效。

示例：

// Vue 3 Composition API
const filteredList = computed(() => {
  return list.value.filter(item => item.status === 'active')
})

模板中：

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

{{ item.name }}

特殊情况：需要在循环内做独立条件判断

如果某些条件只针对单个列表项（比如根据 item 状态显示不同内容），应在 v-for 内部使用 v-if、v-else-if 或 v-show，而非放在同一标签上控制是否渲染该节点。

• ✅ 正确：在 <li> 内部嵌套条件分支
• ❌ 错误：<li v-for="..." v-if="...">

例如：

【管理员】{{ user.name }} {{ user.name }}

替代方案：用 template 包裹实现“条件化循环”

若必须在模板层动态决定是否执行整个循环（如：空数组时不渲染任何 <li>），可用 <template></template> 标签包裹 v-for，并在外层加 v-if 控制是否进入循环逻辑。

<template v-if="shouldRenderList"><li v-for="item in list" :key="item.id">{{ item.text }}</li>
</template>

注意：template 是虚拟容器，不会被渲染为真实 DOM 节点，适合做逻辑分组。

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