Vue 为什么要避免 v-fo 和 v-if用到一起

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

当v-if和v-for用在同一个元素上时，因为 v-for 比 v-if 优先级更高 ，所以会先执行循环，再进行判断，这样无论条件判断的结果如何，循环都会执行，就会造成性能低，页面可能卡顿的现象出现，所以要避免他们用在一起

<div v-for="item in list" 
     v-if="item .active" 
     :key="item.id">
</div

以上代码将会经过如下运算

this.list.map( item=> {
     if (item.active) {
         return item.name
     }
});

一些特殊要求，我们还是需要 v-for 和 v-if 一起使用解决方式有两种
方式一：
1、使用空标签 template，让for循环在template上面；
示例：

// list 是一个数组
<template v-for="(item,index) in list" >
 
        <div v-if="active" :key="index">
            {{item}}
        </div >
 
</template>

2、使用 compted 先计算完属性再去渲染模版

computed: {
    activeIndex: function () {
        return this.list.filter( (item)=> {
            return item.name;
        })
    }
}