v-for遍历数组

遍历item
遍历item、index

<div id="app">
  <!--没有索引值-->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>
  <!--获取索引值-->
  <ul>
    <li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
  </ul>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ['Perry','Mary','Peter']
    }
  })
</script>

:key属性提高性能

官方推荐在使用v-for时，给对应的元素或组件添加一个唯一的:key属性，提高性能。

<li v-for="item in names" :key="item">{{item}}</li>

为什么能提高性能呢？

举个栗子，数组元素ABCD渲染之后，希望在B和C之间插入E，Diff算法默认执行是把C更新成E，D更新成C，最后再插入D，按照这种比较笨的方式复用元素，性能很低。所以需要使用key来给每个节点做唯一标识，这样Diff算法就可以正确地识别节点，从而找到正确的位置插入新的节点。key的作用主要是为了高效地更新虚拟DOM。

响应式的数组方法

并不是所有修改数组的方法都是响应式的

响应式的

push：在最后面添加元素（可以添加多个元素）
pop：删除最后一个元素
shift：删除第一个元素
unshift：在最前面添加元素（可以添加多个元素）
splice：在数组的指定位置删除并添加一些元素。第一个参数为起始位置，第二个参数为要删除的元素个数，后面的可变参数为要添加的元素。可以实现以下三种目的：
- 删除元素：splice(start, count)，count为要删除几个元素，如果没有传就删除start后面所有元素
- 插入元素：splice(start, 0, ‘x’, ‘y’)，第二个参数为0，后面是要插入的元素
- 替换元素：splice(start, count, ‘x’, ‘y’)，count为要替换几个元素，后面是用于替换前面的元素
sort：数组元素排序
reverse：数组元素反转

非响应式的

通过索引值修改数组元素：this.arr[0] = ‘a’

但是Vue.set(要修改的对象, 索引值, 修改后的值)这种通过索引值修改数组元素的方式是响应式的，例如：Vue.set(this.arr, 0, ‘a’)

v-for遍历对象

遍历value
遍历value、key
遍历value、 key、index

<div id="app">
  <!--获取value-->
  <ul>
    <li v-for="value in info">{{value}}</li>
  </ul>
  <!--获取key和value-->
  <ul>
    <li v-for="(value, key) in info">{{key}}-{{value}}</li>
  </ul>
  <!--获取key、value和index-->
  <ul>
    <li v-for="(value, key, index) in info">{{key}}-{{value}}-{{index}}</li>
  </ul>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'Perry',
        age: 22
      }
    }
  })
</script>