不要在v-for中使用v-if_vue v-for 不用v-if-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42000816/article/details/112605297

本文揭示了在VueJS中使用v-if与v-for结合进行数据过滤可能导致的性能问题。Vue优先处理v-for，导致数组每个元素都会被检查。为优化，建议在遍历前通过计算属性过滤数据。示例代码展示了如何改用计算属性预先过滤出价格低于50的产品，从而提高应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

以下代码写法，相信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>