vue中v-for的最佳使用技巧

心语：要用最好的自我去对待最爱的人，而不是用最坏的自我去考验对方是否爱你。

在vuejs中，v-for 的使用是比较常见的，它允许您在模板代码中编写for循环。那么在使用v-for的时候，可曾思考过使用这个指令的一些技巧吗？
在介绍它的使用技巧之前，我先介绍下它的基本用法吧，在vue中v-for可以遍历数组、对象、字符串，但是用的最多的还是遍历数组，基本方法如下：

<div id="app">
	<ul>
  <li v-for='item in list'>
    {
  { item.name }}
  </li>
</ul>
</div>

可能有些初学者在使用的过程中，不会考虑太多的使用技巧，直接遍历定义在data中的数据，其实vue在设计的初衷，也考虑到了这个问题，如果频繁使用data中的数据，可能会造成一些性能上的消耗，是相当不友好的。

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

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

建议在遍历数据的时候，都尽可能的加上key，设置一个惟一的键属性，它可以确保组件以您期望的方式工作。有些时候，可能使用索引index也可以，但是在一些特定的场景下，比如多场景登录下，如果不使用key来标识当前使用的登录方式，那么可能会造成数据的紊乱问题，如果数据量比较大， 页面的数据更新时会造成渲染数据消耗很大的性能甚至出现不可预测的bug，如果我们对每个元素都有唯一的键引用，那么我们就可以更好地准确地预测DOM将如何操作，就可以避免很多不必要的问题出现。

<div id="app">
	<ul>
  <li v-for='item in list'  :key='item.id'>
    {