不要在v-for中使用v-if

一、前言

以下代码写法，相信80%的初学者写过，即使没写过，也应该见过！

<ul>
 <li
  v-for="product in products"
  :key="product.id"
  v-if="product.price < 50"
 >
  {
   
   { product.name }}
 </li>
</ul>

使用 v-if 来过滤 v-for 循环的数据是一个超级大错误！尽管这看起来很直观，但它会导致一个巨大的性能问题。

二、原因

VueJS 优先考虑 v-for 而不是 v-if 指令，这意味着您的组件将循环遍历每个元素，然后检查 v-if 条件以确定是否应渲染。因此，实际上，无论条件是什么，您都将遍历数组的每个项目。

三、解决方案

为避免上述问题，我们应该在遍历模板中的数据之前对其进行过滤。在此，使用计算属性来解决。

首先，我们只需要设置一个计算属性，为了获得与之前的 v-if 相同的功能，代码应如下所示。

<ul>
 <li
  v-for="products in productsUnderFifty"
  :key="product.id"
 >
  {
    
    {
    
     product.name }}
 </li>
</ul>

<script>
 export default {
    
    
  data() {
    
    
   return {
    
    
    products: [],
   };
  },
  computed: {
    
    
   productsUnderFifty: function() {
    
    
    return this.products.filter(
     (product) => product.price < 50
    );
   },
  },
 };
</script>