一、前言
以下代码写法,相信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>