我们先说出答案,然后再具体进行分析,然后给出具体的解决方案。
答案
- 在vue中,v-for的优先级比v-if要高。所以vue会先进行遍历,然后再进行条件判断,这样在条件为假的时候会造成不必要的性能浪费。
分析
下面我们看一个例子。
<body>
<div id='app'>
<div v-for='item in color' v-if='flag'>
{{item}}
</div>
<u></u>
<div v-if='flag'>
<div v-for='item in color' >
{{item}}
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
color:['red','green','blue','orange','yellow'],
flag:false
}
},
})
</script>
</body>
打开浏览器开发者工具,看一下最后的html代码:
<div id="app">
<!---->
<!---->
<!---->
<!---->
<!---->
<u></u>
<!---->
</div>
通过最后的html代码,我们可以知道第一个v-for与v-if连用的div盒子运行了五次,第二个v-for与v-if没有连用的div盒子只运行了一次。
下面我们分析第一个v-for与v-if连用的div盒子:
- v-for比v-if优先级高,所以会先进性遍历
- 然后对每个遍历的结果进行条件判断,如果条件为真,则进行渲染,条件为假,则不进行渲染。
第二个v-for与v-if没有连用的div盒子:
- 先运行父级盒子,进行条件判断,如果条件为真,则进行渲染,条件为假,则不进行渲染。
这样我们发现v-for与v-if连用会造成性能的浪费(可能五个不明显,但如果上百个甚至更多,这样造成的性能浪费更大),那怎样解决呢?答案就是不连用,不连用的情况也有几种,我们看下一章。
解决方案
已经知道条件的情况下
在已经知道条件的情况下,应该先进行条件判断,再进行循环:
<template v-if='flag'>
<div v-for='item in arr' >
{{item}}
</div>
</template>
使用template表签可以避免生成空的div盒子。
在不知道条件的情况下
在不知道条件判断的情况下,一般是通过循环后的索引或者元素对象来进行判断。
<template v-for='(item,index) in color'v>
<div v-if='index % 2 == 0'>
{{item}}
</div>
</template>
\