v-if和v-for——Vue性能优化 ｜ 青训营
Vue性能优化——v-if和v-for
在代码中，将v-for与v-if同时使用，在vue2和vue3中有不同的结果
v-if和v-for不能同时出现
以下为简单代码示例，包括数据data和html代码
data() {
return {
arr: [
{ name: 'Mary', isShow: true },
{ name: 'Kate', isShow: false },
{ name: 'John', isShow: true },
{ name: 'Tom', isShow: false },
{ name: 'Jerry', isShow: true }
],
}
}
<div id="app">
<template>
<ul>
<li v-for="(item, index) in arr" :key="index" v-if="item.isShow">{{ index }}: {{ item.name }}</li>
</ul>
</template>
</div>
- 在vue2中，可以正常运行，得到如下结果，0，2，4的顺序也可以说明
v-for先运行：
- 而在vue3中，则会出现错误提示：
-
这是由于在vue2和vue3中
v-if与v-for的优先级不同：- vue2中，
v-for比v-if的优先级更高，v-if的条件可以访问到v-for作用域内定义的变量别名 - vue3中，
v-if比v-for的优先级更高，v-if的条件将无法访问到v-for作用域内定义的变量别名
- vue2中，
大家可以参考官方文档：列表渲染 | Vue.js (vuejs.org)
解决方案
法一：
- 当
v-if不依赖v-for时，我们可以将v-if写在v-for的外层，这样就可以让v-if判断优先
当然，这种方法不适合我们的例子
如果是要通过
v-if控制整个ul列表的出现，则可以通过在代码进行以下修改来实现，当然不要忘记声明ifShowList<template v-if="ifShowList"> <ul> ... </ul> </template>当然，
<template></template>不是必须的，如果用其他标签也是可以的
法二：
- 当
v-if的判断条件依赖于v-for的某个值时(item,index)，也就是我们例子的情况，可以通过计算属性进行过滤的方法，直接遍历过滤后的列表，像这样在计算属性中过滤的成本远比v-if的成本低
computed:{
newArr(){
return this.arr.filter(item => item.isShow)
}
}
<div id="app">
<ul>
<li v-for="(item, index) in newArr" :key="index">{{ index }}: {{ item.name }}</li>
</ul>
</div>
- 最后的执行结果如下：
总结
v-if和v-for不能一起使用的原因是他们的优先级不同，在vue2中v-for的优先级比v-if的优先级高，一起使用会造成性能浪费- 解决方案：把
v-if放在v-for的外层；把需要v-for的属性先从计算属性中过滤一次
虽然在vue3中
v-if优先级比v-for的优先级高，但还是建议不要在一起使用
