VUE为什么不建议v-for和v-if一起使用

在vue2和vue3的官方文档里都写到不推荐 v-if 和 v-for 同时使用。

1.vue3

在vue3中，是因为当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。 这将会报错。

2.vue2

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

3.解决办法

a.可通过计算属性computed提前过滤掉那些不需要显示的项

computed: {
  // 得到过滤后的数据
  filteredTodos() {
    return this.todos.filter(todo => !todo.isComplete);
  }
}

b.为了避免渲染本应该被隐藏的列表。将v-if放在外层嵌套 template（页面渲染不生成dom节点），在这一层先进行 v-if 判断，然后在内部进行v-for循环。

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