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

示例代码：

    
    



    

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


        
{{child.title}}


        
    
    

    

当 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

结论：

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