vue学习之------vue2中的v-if、v-for、v-show

在vue2中，v-for的优先级高于v-if的优先级，就是当v-for循环中有v-if会先循环渲染，再在过程中判断v-if条件

v-if的特点：

如果状态由false变为true，会触发组件创建的生命周期（created,mounted）；如果状态由true变为false，会触发组件销毁的生命周期（destroyed），性能消耗大。

所以，当v-for循环中使用了v-if，每一次循环都要依据条件直接操作DOM节点的增加和删除，造成浪费

解决办法：

1、第一种情况：如果v-if的判断条件不依赖循环列表中的数据，则把v-if写在v-for外面，这样就相当于让v-if的优先级高于v-for

2、第二种情况：如果v-if的判断依赖循环列表中的数据，就用计算属性【computed + 数组的filter（）方法】先把所需循环列表先过滤好，再循环计算出的数组

v-show特点：

改变css中display：none/block

状态为false的时候，DOM元素没有被销毁，只是看不到，但是也没有占据位置

如果状态要来回切换，则比较适合使用v-show