从源码中得到答案之v-if和v-for哪个优先级更高？在源码中，是先判断v-for，再判断v-if的。

`v-if`和`v-for`哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？

源码路径 compiler/codegen/index.js

在源码中，是先判断v-for，再判断v-if的。

<p v-for="item in items" v-if="condition"></p>

做个测试如下

<!DOCTYPE html>
<html>
<head>    
<title>Vue事件处理</title>
</head>
<body>    
<div id="demo">
    <h1>v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？</h1>        
    <!-- <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>

两者同级时，渲染函数如下

(function anonymous() {
    with(this){return _c('div',{attrs:{"id":"demo"}},
    [_c('h1',[_v("v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？")]),_v(""),
    _l((children),function(child){return (isFolder)?_c('p',[_v(_s(child.title))]):_e()})],2)}
})

_l包含了isFolder的条件判断

两者不同级时，渲染函数如下

(function anonymous() {
    with(this){return _c('div',{attrs:{"id":"demo"}},
    [_c('h1',[_v("v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？")]),_v(""),
    (isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e()],2)}
})

先判断了条件再看是否执行_l

结论：

1. 显然v-for优先于v-if被解析
1. 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
1. 要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
1. 如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项

从源码中得到答案之v-if和v-for哪个优先级更高？

v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？

`v-if`和`v-for`哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？