v-for 和 v-if 优先级及如何优化

1 v-for 优先于v-if

2 如果同时出现，每次先执行循环再执行条件，浪费性能

3

 3-1 要避免这种情况，在外出嵌套template, 在template用if判断，然后在内部进行v-for循环。

      <template v-if=”flag”>

        <div v-for=”item in List”> {{item.name}}</div>

   </template>

3-2

<div v-for="item in filterArr" :key="item.id">

  {{ item.name }}

</div>

data(){

  return{

    arr:[

      {id:1,isShow:false},

      {id:2,isShow:true}

    ]

  }

},

computed:{

  filterArr(){

    return this.arr.filter(item=>{

      return item.isShow

    })

  }

}