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

源码中找答案compiler/codegen/index.js

测试代码：

 


    


      
v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?
      
  
 

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

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