vue 3 禁止在同一元素上混用 v-if 和 v-for，必须拆开：优先用计算属性过滤数据、将 v-if 提至父容器，或用带 key 的 template 包裹分组。
不能在同一元素上同时使用 v-if 和 v-for —— Vue 3 明确不推荐，且编译器会报警告。这不是“怎么用”的问题，而是“必须拆开”的硬性规范。混用会导致变量未定义、渲染中断、逻辑不可控，尤其当 v-if 条件依赖 v-for 的循环变量（如 item.status）时，Vue 3 会在编译阶段就拒绝执行。
用计算属性提前过滤数据
把条件判断从模板层移到逻辑层，是最清晰、高效、可复用的解法。让 v-for 只负责渲染，不承担筛选职责。
- 在
<script setup></script>中定义计算属性，比如：const activeUsers = computed(() => users.filter(u => u.status === 'active')) - 模板中只写：
<div v-for="user in activeUsers" :key="user.id">{{ user.name }}</div> - 好处：过滤逻辑复用性强；响应式更新精准（仅当
users或其相关字段变化时重算）；模板干净无副作用
把 v-if 移到外层容器
当条件作用于整个列表（而非单个条目），比如“是否展示该区块”，就把 v-if 提到父级元素上。
- ✅ 正确写法：
- {{ item.label }}
- ❌ 错误写法：
<li v-for="item in items" v-if="showList" :key="item.id">...</li>（重复判断showList，且无实际意义） - 这样既避免了指令冲突，又提升了性能——条件为
false时，整个v-for根本不会执行
用 template 包裹实现逻辑分组
当需要对部分条目做条件控制（例如按状态分组渲染），又不想新建计算属性时，可用 <template></template> 作为不可见包装器。
- 例如只渲染已激活的项，但保留原始数组结构：
<template v-for="item in items" :key="item.id"><br> <div v-if="item.isActive">{{ item.name }}</div> <br></template> -
<template></template>不生成真实 DOM 节点，只是语法占位，v-if和v-for各司其职，互不干扰 - 注意：每个
<template></template>必须带:key，且 key 值需稳定（不能用 index）
别用 v-show 替代 v-if 来“绕过”规则
v-show 虽然不会报错，但它只是切换 display: none，所有节点仍会被创建和挂载。这无法解决初始渲染时变量未定义的问题，也不能避免无谓的组件实例化和事件绑定。
- 比如
<childcomp v-for="x in list" v-show="x.ready"></childcomp>，即使x.ready为false，ChildComp依然会执行setup、触发onMounted，可能引发副作用 - 真正需要条件性创建/销毁时，必须用
v-if+ 正确位置，而不是视觉隐藏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
