v-if和v-for哪个优先级更高

[cheny88]

v-if和v-for为什么不建议同时使用
原来：

<p v-for="child in children" v-if="isFolder">{{child.title}}</p>
//<script>中的代码如下：
const app=new Vue({
  el:"#app",
  data(){
    return {
      children:[
             {tiltle:"foo"}
             {tiltle:"bar"}
         ]
    }  
  }
})

1. v-for的优先级是高于v-if的

原因：源码generation element中在处理AST时，先if看 静态节点，再else if看once，再else if 看for，然后再else if 看if

2. 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
3. 要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环

改成 :

<template v-if="isFolder">
<p v-for="child in children">{{child.title}}</p>
</template>

注意：此时判断的是children显不显示

如果是children选项内部的child有条件判断，例如：

const app=new Vue({
  el:"#app",
  data(){
    return {
      children:[
             {tiltle:"foo",isShow:true}
             {tiltle:"bar",isShow:false}
         ]
    }  
  }
})

这样不得不在循环的内部做判断，如何优化？
用一个计算属性去做过滤，把需要渲染的才留下，不需要渲染的就不放到循环中，所以，模板中提供的数组应该是由计算属性处理过的需要渲染的项，不在循环内部判断。