vue2 v-if和v-for不一起使用的方法

避免在v-for中使用v-if

一个超常见的错误是使用v-if来过滤v-for循环的数据。

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

上述的代码虽然看上去直观明了，但这会导致一个巨大的性能问题

Vue中的v-for优先于v-if指令。这意味着组件将遍历每个元素，然后再检查v-if条件以查看是否应该呈现。如果你将v-if与v-for一起使用，无论条件是什么，都将遍历数组的每一项。

假设products数组有数千个项，但想要渲染的只有3个在售产品。每次重新渲染时，即使出售的3种产品根本没有改变，Vue也必须遍历这数千个项。

下面有几个方法:

使用computed属性

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

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

这样的好处是：

1. 数据属性只会在依赖项发生变化时重新评估

2. 模板只遍历在售的产品，而不是每一个产品

使用过滤方法

使用过滤方法的代码几乎相同，但使用方法会改变访问模板内值的方式。但是，如果我们希望能够将变量传递给过滤过程，那么就应该选择方法这条路。

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

<script>
  export default {
   data () {
    return {
     products: []
    }
   },
   methods: {
    productsShow () {
     return this.products.filter(product => product.isShow)
    }
   }
  }
</script>

在循环外面套一个v-if