v-for 基本语法

我们可以用 v-for 指令基于一个数组来渲染一个列表。（一个标签只能有一个 v-for 指令）

v-for 指令需要使用 item in items（item of items 也可以）形式的语法，其中 items 是源数据数组，而 item 是被迭代的数组元素的别名：

（ps：for in 是遍历键名，for of 是遍历键值）

结果：

---

在 v-for 块中，我们可以访问所有父作用域的 property，v-for 还支持一个可选的第二参数，即当前项的索引：

结果：

---

v-for 也可以遍历对象（遍历对象时，会按 Object.keys() 的结果遍历，该方法返回一个表示给定对象的所有可枚举属性的字符串数组）：

结果：

---

也可以提供第二个参数为 property 名称（键名）：

结果：

还可以用第三个参数作为索引。

---

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

 

---

关于 key 的设置

我们可以在 v-for 中 设置 key attribute：

此属性用于为当前节点添加一个唯一标识（key 值重复会报 warn）。

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

简单讲：不加 key 时，Vue 在更新时会尽可能的尝试复用，替换节点的值，而非增删节点，而添加了 key 后，如果两个节点的值相同就复用，不同就删除旧节点，增加新节点。（增删节点比替换节点值性能消耗更高）

除此以外，设置 key 还可以完整地触发组件的生命周期钩子和触发过渡。因为它是强制替换元素/组件，而非复用。

Vue 官方建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

不仅因为它是 Vue 识别节点的一个通用机制，在后面还能看到其他的作用。

---

数组更新检测

（1）变更方法

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

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

我们可以在控制台中对 Vue 实例内的数组进行变更操作，例如：

我们在控制台中调用 push() 方法：

结果：

---

（2）替换数组

替换数组是非变更方法，例如 filter()、concat()、slice()。它们不会变更原始数组，而是返回一个新数组，例如：

结果和上面的例子一模一样。

---

v-for 嵌套

结果：

---

v-for 与 v-if 一同使用

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

当它们处于同一节点时，v-for 的优先级高于 v-if，也就是说 v-if 将重复运行于 v-for 的每一次循环中。

---

我们可以利用优先级的机制来渲染部分节点，例如：

结果：

---

采取计算属性也可以达到上述效果：

结果：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，此方法不会改变原始数组。

使用计算属性的好处就是结果可以缓存，如果数据没有改变就不用重复计算。

---

我们也可以通过 v-for 和 v-if 来有条件地跳过循环的执行：

因为 v-for 的优先级高于 v-if，所以我们将 v-if 放置于外层元素。