背景:vue中经常使用到v-for和v-if,那么它们的优先级是怎么样的呢?怎么才能实现性能优化呢?下面来简单分析一下,如何分析,请参考以下测试demo,以及源码中参考src/compiler/codegen/index.js。demo代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue v-if v-for</title>
</head>
<body>
<div>v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?源码中找答案src/compiler/codegen/index.js</div>
<div id="demo">
<!--用法一,不推荐,先走循环浪费性能-->
<!-- <p v-for="child in children" v-if="isFolder">{{child.title}}</p> -->
<!--用法二,在外层做判断,内层走循环-->
<template v-if="isFolder">
<p v-for="child in children"> {{child.title}} </p>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//创建实例
const app = new Vue({
el: '#demo',
data() {
return {
children: [
{title:'foo'},
{title:'bar'},
]
}
},
computed: {
isFolder() {
return this.children && this.children.length > 0
}
},
});
console.log(app.$options.render);//查看渲染函数
</script>
</body>
</html>
执行方法一,查看render函数,得出如下结果:
执行方法二,查看渲染函数,得出如下结果:
由以上执行得出结论:
1.v-for显然优先于v-if被解析,如果同时出现在同级每次渲染都会先执行循环再判断条件,由此可见对性能损耗比较大,由此我们可以采用法二,在外层添加判断条件,内层循环来优化性能。下面是源码验证:
以上是关于vue中v-for和v-if的深层剖析,希望对大家理解vue有一定的帮助。