v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?
示例代码
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue事件处理</title>
</head>
<body>
<div id="demo">
<h1> v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?</h1>
<!-- 同级情况 会先循环 再进行判断 -->
<p v-for="child in children" v-if="isFolder">{{child.title}}</p>
<!-- 不同级情况 会先判断 if 条件 再进行 for 循环 -->
<template v-if="isFolder">
<p v-for="child in children">
{{child.title}}
</p>
</template>
</div>
<script src="./js/vue.js"></script>
<script>
/***
v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?
源码中找答案
compiler/codegen/index.js
做个测试如下
**/
// 创建一个实例!#
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>
当 v-for 和 v-if 同级出现的时候优先级是?!render 渲染函数!
ƒ anonymous(
) {
with(this){
return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v(" v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?")]),_v(" "),_l((children),function(child){return (isFolder)?_c('p',[_v(_s(chil…
先循环,再判断!
当 v-for 和 v-if 不同级出现的时候优先级是?!先执行判断语句
ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v(" v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?")]),_v(" "),(isFolder)?_l((children),function(child){return _c('p',[_v("\n …
先判断了条件再看是否执行_l
结论:
- 显然v-for优先于v-if被解析(把你是怎么知道的告诉面试官)
- 如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能
- 要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环
- 如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项