Vue——06循环遍历，Key属性以及数组更新
目录
- v-for遍历数组
- 一个简单的案例：
- v-for可以遍历对象：
- key属性
- 检测数组更新（响应式）
v-for遍历数组
当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
v-for的语法类似于JavaScript中的for循环。
格式如下：item in items的形式。
一个简单的案例：
- 如果在遍历的过程中不需要使用索引值
v-for=“movie in movies”
依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
- 如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？
语法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值。
v-for可以遍历对象：
比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。
key属性
官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。
为什么需要这个key属性呢（了解）？
这个其实和Vue的虚拟DOM的Diff算法有关系。
这里我们借用React’s diff algorithm中的一张图来简单说明一下：
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。
所以一句话，key的作用主要是为了高效的更新虚拟DOM。
检测数组更新（响应式）
因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
- push()添加元素（可以是多个元素）
pop()删除最后一个元素
shift()删除第一个元素
unshift()数组最前面添加元素（可以是多个元素）
splice()
sort()排序
reverse()翻转
通过索引修改元素不是响应式的，如果需要响应式的可以使用splice或者set。
以上是 Vue——06循环遍历，Key属性以及数组更新 的全部内容， 来源链接： utcz.com/z/377305.html
