v-for与v-if一同使用时的注意事项

       v-if指令，需要注意的是，除非必要，否则不要将v-if 和v-for用在同当一个元素上。当它们处于同一节点时，v-for 的优先级比 v-if 高，v-for 每次迭代时都会执行一次 v-if，这会造成不必要的计算开销，影响性能，尤其是当只需要渲染很小一部分的时候，表现尤为明显。比较好的做法是直接在数据模型中对列表进行过滤，以减少视图中的判断。例如：

1 <div id="app"> 
2   <p v-for="item in list" v-bind:key="item.id" v-if="item.id < 2">
3     {{item.name}}
4   </p >
5 </div> 

即使 100 个 item 中只有一个符合 v-if 的条件，也需要循环整个数组，这在性能上是一种浪费。在这种情况下，可以使用计算属性，在数据模型中事先先做好处理，然后将符合条件的结果通过

v-for 显示出来，例如

1 <div id="app">
2   <p v-for="item in filteredlist" v-bind:key="item.id">
3     {{item.name}}
4   </p >
5 </div> 
6 computed:{
7   filteredList(){
8     return this.list.filter(function(item){
9     //返回id小于2的项并添加到filteredlist数组中
10    return item.id < 2
11    })
12   }
13  }

两个的显示结果都是一样的，但是在性能上却相差很大。数据量小的情况下可能效果不太明显，但如果数据量大的话，区别量就会很明显。

另一种场景是,如果希望有条件地跳过循环的执行，那么应该将 v-if 置于外层元素上。例如

1    <div id="app">
2      <div v-if="products.length == 0">没有找到您搜索的产品</div> 
3      <div v-else> 
4       <p v-for="item in products" :key="item.id"> 
5        名称:{{item.name}} 价格:{{item.price}} 
6       </p > 
7     </div> 
8    </div>

上述代码在外层<div>标记中判断想要迭代的数组长度，如果数组的长度为0，那么就不需要执行

v-for,直接显示“没用找到您搜索的商品”这句提示语就可以了。