十一、列表渲染v-for与v-if一同使用性能优化技巧

1、当 v-for 与 v-if 一起使用时，v-for 的优先级比 v-if 更高。这意味着 v-if 分别重复运行于每个 v-for 循环中。

      如果渲染一个列表时，需要按照条件来渲染，那么需要v-for与v-if一起使用了。

2、Vue官方不建议v-if和v-for同时用在一个元素上，因为一起使用的话，每一个元素都会添加一个v-if,

       重复运行于每一个v-for循环中，会造成性能的浪费。

3、建议使用computed计算属性来解决这个（按照条件来渲染列表）问题。

 

<template>
     <div v-for='(item,index) in newItems' :key='index'><!--3、使用computed计算属性,直接返回筛选过滤后的结果，把结果数据直接当列表数据源使用-->
          {{item.title}}
     </div>
</template>
<script>
    let data={
        items:[
            {title:'羊肉串',isShow:true},
            {title:'猪肉串',isShow:false},
            {title:'牛肉串',isShow:true},
            {title:'馒头片',isShow:true},
            {title:'面包片',isShow:false}
        ]
    };

    computed:{//3、建议使用computed计算属性来解决这个（按照条件来渲染列表）问题。
        newItems(){             //其实使用了computed计算属性的getter
            return this.items.filter((item)=>{
               return item.isShow==true;
            });
        }
    }
    </script>