1.用v-for把一个数组对应为一组元素

我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。

• 在v-for块中，我们可以访问所有父作用域的property
• v-for还支持一个可选的第二个参数，即当前项的索引
• 也可以用of替代in作为分隔符，因为它更接近JavaScript迭代器的语法

2.在v-for里使用对象

• 我们可以用v-for来遍历一个对象的property
• 也可以提供第二个的参数为property名称（也就是键名key）（value, name）
• 还可以使用第三个参数作为索引（value, name, index)
• 在遍历对象时，会按Object.keys()的结果遍历，但是不能保证它在不同JavaScript引擎下的结果都一致

3.维护状态

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

• 这个默认模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态（例如表单输入值）的列表渲染输出
• 为了给Vue一个提示以便能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一key attribute
• 尽可能在使用v-for时提供key attribute，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升
• 因为key是Vue识别节点的一个通用机制，key并不仅与v-for特别关联，它还具有其它用途
• 不要使用对象或数组之类的非基本类型值作为v-for的key，使用字符串或数值类型的值

4.数组更新检测

4.1变更方法

Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新，被包裹过的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

4.2替换数组

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如filter()、concat()和slice()。它们不会变更原始数组，而总是返回一个新数组。

• 当使用非变更方法时，可以用新数组替换旧数组
• 可能认为这将导致Vue丢弃现有DOM并重新渲染整个列表，幸运的是事实并非如此
• Vue为了使得DOM元素得到最大范围的重用而实现了一些智能的启发式方法 所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

5.显示过滤/排序后的结果

有时我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。

• 在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
• 在计算属性不适用的情况下，（例如，在嵌套v-for循环中）你可以使用一个方法

6.在v-for里使用值得范围

v-for也可以接受整数，在这种情况下，它会把模板重复对应次数。

7.在template中使用v-for

类似于v-if，也可以利用带有v-for的template来循环渲染一段包含多个元素的内容。

8.v-for与v-if一同使用

不推荐在同一元素上使用v-if和v-for。

• 当它们处于同一节点，v-if的优先级比v-for更高，这意味着v-if将没有权限访问v-for里的变量
• 可以把v-for移动到template标签中来修正

9.在组件上使用v-for

• 在自定义组件上，可以像在任何普通元素上一样使用v-for
• 然而任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域
• 为了把迭代数据传递到组件里，我们要使用props
• 不自动将item注入到组件里的原因是，这会使得组件与v-for的运作紧密耦合
• 明确组件数据的来源能够使组件在其他场合重复使用