直接上代码了
<template>
<div>
<h1>v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?</h1>
<!-- 测试1 -->
<div v-if="isShow">
<p v-for="(item,index) in arr" :key="index">{{item.name}}</p>
</div>
<!-- 测试2 -->
<!-- <p v-for="(item,index) in arr" :key="index" v-if="isShow">{{arr.name}}</p> -->
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{name:'张三'},
{name:'李四'},
]
}
},
created(){
// 测试1
console.log(this.$options.render)
//输出结果1
// var render = function() {
// var _vm = this
// var _h = _vm.$createElement
// var _c = _vm._self._c || _h
// return _c("div", [
// _c("h1", [
// _vm._v("v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?")
// ]),
// _vm.isShow? _c("div",_vm._l(_vm.arr, function(item, index) {
// return _c("p", { key: index }, [_vm._v(_vm._s(item.name))])
// }),0): _vm._e()
// ])
// }
// 测试2
// console.log(this.$options.render)
//输出结果2
// var render = function() {
// var _vm = this
// var _h = _vm.$createElement
// var _c = _vm._self._c || _h
// return _c("div",[
// _c("h1", [
// _vm._v("v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?")
// ]),
// _vm._l(_vm.arr, function(item, index) {
// return _vm.isShow
// ? _c("p", { key: index }, [_vm._v(_vm._s(_vm.arr.name))])
// : _vm._e()
// })
// ],2)
// }
},
computed: {
isShow() {
return this.arr && this.arr.length > 0
},
}
}
</script>
总结
- 显然v-for优先于v-if被解析
- 如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能
- 要避免出现这种情况,则在外层嵌套template(div),在这一层进行v-if判断,然后在内部进行v-for循环
- 如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项