对应源码的位置compiler/codegen/index.js
1.测试的案例代码
<body>
<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="../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>
两者同级时,渲染函数如下：
ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},_l((children),function(child){return (isFolder)?_c('p',[_v(_s(child.title))]):_e()}),0)}
}
_l包含了isFolder的条件判断(_l列表渲染函数)
两者不同级时,渲染函数如下：
ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[(isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e()],2)}
}
先判断了条件再看是否执行_l
2.结论:
1.显然v-for优先于v-if被解析
我写了一个测试的代码并且在源码中找到了这个结论
codegen>index.js中for的优先级高于if
if (el.staticRoot && !el.staticProcessed) {
return genStatic(el, state)
} else if (el.once && !el.onceProcessed) {
return genOnce(el, state)
} else if (el.for && !el.forProcessed) {//for
return genFor(el, state)
} else if (el.if && !el.ifProcessed) {//if
...
2.如果同时出现，每次渲染都会先执行循环再判断条件,无论如何循环都不可避免，浪费了性能
3.要避免出现这种情况，则在外层嵌套template,在这一层进行v-if判断， 然后在内部进行v-for循环
4.有一个问题，当循环项中有需要判断的属性怎么办呢？这个时候应该用计算属性做一下过滤，避免循环中还要进行判断
