Vue中v-for不能与v-if一起写的原因

v-for指令用于循环渲染一个列表 ， v-if用于根据条件动态地渲染元素

这两个指令都是vue中最为常见的指令，但是他们不可以放在一起使用，原因是 v-for的优先级高于 v-if

举个例子就是：

我们这么写的本意，其实是想做到，如果 show为false，我们不展示列表。如果show为true，我们循环渲染list列表。
但如果将v-for和v-if放在一起，其实等价于 依次渲染了6个div，每一个里面都添加了v-if判断

//等价于下面的形式
1
2
3
4
5
6

也就是在每一次的循环中，都会进行v-if的判断，这个是非常耗费性能的，大量的判断会极大降低项目质量，所以vue官方在风格指南中极为不推荐甚至不让你放在一起写

但是实际开发中，一定会遇到这种类似场景的，就是 要根据条件来进行循环渲染，这种要怎么解决呢？

方法一：

在v-if不依赖于v-for的前提下，直接将v-if移到外层，既然v-for的优先级高于v-if，那我将v-if放到最外层首先进行判断不就可以了嘛

方法二：

在上面的例子中， v-if是靠data数据里的show变量来控制是否展示的，即并不依赖于v-for的某个值。

那假如，我需要根据v-for的index值（或item值）来控制是否展示呢？

即，v-if的判断条件需要依赖于v-for的某个值（item，index）

对于这种情况，我们可以把list替换为一个计算属性 list_filter，让其返回一个过滤后的列表
好处是：
1、过滤后的列表 只会在 list 数组发生相关变化时才被重新运算，过滤更高效。
2、解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。