为什么要避免 v-if 和 v-for 用在一起

原因：

vue2.x 中v-for优先级高于v-if，而vue3.x 相反。

所以2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用，造成性能浪费；

在3.x 版本中 v-if 总是优先于 v-for 生效，导致v-if访问不了v-for中的变量。

该如何解决呢？

1.可以在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

<template v-if="show">
    <div v-for="item in data"></div>
</template>

2.假如条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项

computed: {
  list () {
   return this.list.filter(item=> {
    return item.isShow
   })
  }
}