为什么v-if和v-for不能连用？-优先级

在 Vue.js中，v-if和v-for分别用于条件渲染和循环渲染，但不建议同时用在同一个元素上，因为两者的优先级不一样，v-for的优先级比 v-if 高，如果一起使用，每次渲染时都会先循环再进行条件判断，先循环再做判断会造成性能浪费，因此使用过程中不要把它们放在同一个元素上。

• 性能问题：当v-if和v-for同时用在一个元素上时，Vue将在每次循环迭代中都执行条件检查，以确定是否应该渲染该元素。这会导致不必要的性能开销，尤其在大型列表中更为明显。如果列表中的大多数项目都需要渲染，那么更好的做法是使用v-if在列表外部进行条件判断，以减少不必要的检查。

• 可读性和维护性：将v-if和v-for结合在一起会使模板更加复杂，降低可读性。这可能使代码更难维护和理解。

• 潜在逻辑错误：在某些情况下，同时使用v-if和v-for可能会导致逻辑错误，因为v-if的条件判断会在每次循环迭代中执行。这可能导致您意外地渲染不应该出现的项目或跳过应该出现的项目。

解决方法：

• 将v-if放在外层嵌套 template（页面渲染不生成dom节点），在这一层先进行 v-if 判断，然后在内部进行v-for循环。

<template v-if="Show">
  <p v-for="item in list">
</template>

• 如果条件出现在循环内部,不得不放在一起时,可通过计算属性computed提前过滤掉那些不需要显示的项。

 computed: {
   items: function() {
     return this.list.filter(item => 筛选条件)
   }
 }

注：v-if和v-for的优先级问题在vue3中不需要考虑，vue3更新了v-if和v-for的优先级，使v-if的优先级高于v-for