在Vue.js编写更好的v-for循环的6种技巧

在VueJS中，v-for循环是每一个项目都会使用的东西，它容许您在模板代码中编写for循环。

在最基本的用法中，它们的用法以下。

<ul>
  <li v-for='product in products'>
    {{ product.name }}
  </li>
</ul>

可是，在本文中，我将介绍六种方法来使你的 v-for 代码更加精确，可预测和强大。

让咱们开始吧。

1.始终在v-for循环中使用key

首先，咱们将讨论大多数Vue开发人员已经知道的常见最佳作法——在 v-for 循环中使用 :key。经过设置一个唯一的键属性，它能够确保组件以您指望的方式工做。

果咱们不使用key，Vue将尝试使DOM尽量高效，这可能意味着 v-for 元素可能会出现乱序或其余不可预测的行为。若是咱们对每一个元素都有惟一的键引用，那么咱们就能够更好地准确地预测DOM将如何操做。

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

2.在一个范围内循环

尽管大多数状况下，v-for 用于遍历数组或对象，但在某些状况下，咱们确定只但愿循环执行必定次数。

例如，假设咱们正在为在线商店建立一个分页系统，而咱们只但愿每页显示10个产品。使用一个变量来跟踪当前的页码，咱们能够像这样处理分页。

<ul>
  <li v-for='index in 10' :key='index'>
    {{ products[page * 10 + index] }}
  </li>
</ul>

3.不要在循环中使用v-if

一个超级常见的错误是使用 v-if 来过滤 v-for 循环的数据。尽管这看起来很直观，但它会致使一个巨大的性能问题——VueJS优先考虑 v-for 而不是 v-if 指令。

这意味着您的组件将循环遍历每一个元素，而后检查 v-if 条件以肯定是否应渲染。所以，实际上，不管条件是什么，您都将遍历数组的每一个项目。

不要这样：

// BAD CODE!
<ul>
  <li 
    v-for='product in products' 
    :key='product._id' 
    v-if='product.price < 50'
  >
    {{ product.name }}
  </li>
</ul>

4.使用计算属性或方法代替

为避免上述问题，咱们应该在遍历模板中的数据以前对其进行过滤。有两种很是类似的方法：

• 使用计算属性
• 使用过滤方法

让咱们快速地介绍一下这两种方法。

首先，咱们只须要设置一个计算属性，为了得到与以前的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>

下面的代码几乎相同，可是使用方法改变了咱们访问模板中的值的方式，若是咱们但愿可以将变量传递给筛选器，那么方法是最好的选择。

<ul>
  <li v-for='products in productsUnderPrice(50)' :key='product._id' >
    {{ product.name }}
  </li>
</ul>

// ...

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

5.在循环中访问项目的索引

除了遍历数组和访问每一个元素以外，咱们还能够跟踪每一个项的索引。

为此，咱们必须在项目后添加一个索引值，它很是简单，可用于分页，显示列表索引，显示排名等。

<ul>
  <li v-for='(products, index) in products' :key='product._id' >
    Product #{{ index }}: {{ product.name }}
  </li>
</ul>

6.遍历一个对象

到目前为止，咱们只真正看过使用 v-for 遍历数组，可是咱们能够轻松地遍历对象的键值对。

与访问元素的索引相似，咱们必须向循环中添加另外一个值。若是咱们用一个参数遍历一个对象，咱们将遍历全部的项。

若是咱们添加另外一个参数，咱们将得到items 和 key，若是添加第三个，咱们还能够访问 v-for 循环的索引。

假设咱们要遍历产品中的每一个媒体资源。

<ul>
  <li v-for='(products, index) in products' :key='product._id' >
    <span v-for='(item, key, index) in product' :key='key'>
      {{ item }}
    </span>
  </li>
</ul>

总结

但愿这篇简短的文章能教您一些有关使用Vue的 v-for 指令的最佳作法。

你还有什么其余建议吗？

---

原文：https://learnvue.co/2020/02/6...

翻译：杜尼卜

---

相关阅读：我总结了12个Vue.js开发技巧和窍门

若是对你有所启发和帮助，能够点个关注、收藏，也能够留言讨论，这是对做者的最大鼓励。

做者简介：Web前端工程师，全栈开发工程师、持续学习者。

如今关注《前端外文精选》微信公众号，还送某网精品视频课程网盘资料啊，准能为你节省很多钱！