v-if 和 v-for不能同时使用的原因以及解决方法

1.首先,v-for循环是作用在dom节点上的,如果同时使用的话，编译器会直接报错，告诉你v-if和v-for不能同时使用;

2.当和 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
     }

});

 哪怕我们只渲染一小部分元素，也得在每次重新渲染的时候遍历整个列表，不论 active 是否发生了变化。如果 list 的数据有很多，就会造成性能低，页面可能卡顿的现象出现。

 解决方法：

1.使用空标签 template，让for循环在template上面；

<template v-for="item in list" >

        <div v-if="active" :key="item .id">
            {{item .name}}
        </div >

</template>

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

computed: {

    activeIndex: function () {

        return this.list.filter( (item)=> {
            return item.name;
        })

    }

}

 v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。