vue须知（1）—— v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？-一一网

源码中找答案compiler/codegen/index.js
做个测试如下

<p v-for="item in items" v-if="condition">
复制代码

<!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> 
</body> 
</html> 
复制代码

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

(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)} 
}) 
//包含了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 
复制代码