1.v-if和v-for哪个优先级高?如何正确使用避免性能问题

源码：el.staticRoot=>el.once=>el.for=>el.if=>el.tag 执行顺序

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

(function anonymous(
){
with(this){return_ .c('div' ,{attrs:{"id":"demo"}},[_ _c('h1' ,[_ _v("v-for和v-i f谁的优先级高?应该
如何正确使用避免性能问题? ")]),_v(" ")，
_1((children)，function(chi1d){return (isFolder)?_ .c('p' ,[_ v(_ s(chi1d.tit1e))]): e()})],2)}
})

_l包含了isFolder的条件判断

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

(function anonymous (
){
with(this){return_ c('div' ,{attrs:{"id":"demo"}},[_ .c('h1',[_ _v("v-for和v-if谁的优先级高?应该
如何正确使用避免性能问题? ")]),_v(" ")，
(isFo1der)?_1((chi 1dren)，function(chi1d){return . _c('p',[_ _v(_ s(child. tit1e))])}): _e()],2)}
})

不管怎样都会先做循环循环里对每一项做isFolder判断，明显不合理

_l :列表循环语句 isFo1der：条件判断

先判断条件，在看是否执行

结论：

1.v-for优先级高于v-if（通过测得代码，在源码中找到答案，v-for高于v-if）
2.如果同时出现，每次渲染都会先进行循环再判断条件，无可避免的会浪费性能
3.要避免出现这种情况，则外侧嵌套template，在这一层先进行v-if判断是否需要执行，然后内部进行v-for循环