在官方文档中明确指出v-for和v-if不建议一起使用。
原因:
v-for 比 v-if 具有更高的优先级,每一次都需要遍历整个数组,造成不必要的计算,影响性能,即使100个list中只需要使用一个数据,也会循环整个数组。
解决方案:
- 在其父元素上进行v-if判断,在内部执行v-for循环
- 如果条件出现在循环内部,可通过计算属性computed提前过滤掉那些不需要显示的项
computed: {
list () {
return this.list.filter(item=> {
return item.isShow
})
}
}