2.6 列表渲染

语法格式：v-for 指令。该指令用在被遍历的标签上。

v-for="(element, index) in elements" :key="element.id"

或者

v-for="(element, index) of elements" :key="element.id"

2.6.1 遍历数组、对象、字符串、指定次数

1. 遍历数组

<div id="app">
  <h1>{{msg}}</h1>
  <h2>遍历数组</h2>
  <ul>
    <li v-for="(product, index) in products" :key="product.
      id">
      商品名称：{{product.name}}，单价：{{product.price}}元/
      千克，下标：{{index}}
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el : '#app',
    data : {
      msg : '列表渲染',
      products : [
        {id:'111',name:'西瓜',price:20},
        {id:'222',name:'苹果',price:10},
        {id:'333',name:'香蕉',price:30}
      ]
    }
  })
</script>

运行效果：

2. 遍历对象

<div id="app">
  <h1>{{msg}}</h1>
  <h2>遍历对象</h2>
  <ul>
    <li v-for="(propertyValue, propertyName) of dog" :key=
      "propertyName">
      {{propertyName}}:{{propertyValue}}
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el : '#app',
    data : {
      msg : '列表渲染',
      dog : {
        name : '拉布拉多',
        age : 3,
        gender : '雄性'
      }
    }
  })
</script>

运行结果：

3. 遍历字符串

<div id="app">
  <h1>{{msg}}</h1>
  <h2>遍历字符串</h2>
  <ul>
    <li v-for="char,index of str" :key="index">
      {{index}}:{{char}}
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el : '#app',
    data : {
      msg : '列表渲染',
      str : '动力节点'
    }
  })
</script>

运行结果：

4. 遍历指定次数

<div id="app">
  <h1>{{msg}}</h1>
  <h2>遍历指定次数</h2>
  <ul>
    <li v-for="number,index of 10" :key="index">
      下标：{{index}}，数字：{{number}}
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el : '#app',
    data : {
      msg : '列表渲染'
    }
  })
</script>

运行结果：

2.6.2 虚拟 dom 和 diff 算法

所谓的虚拟 dom 就是内存当中的 dom 对象。vue 为了提高渲染的效率，只有真正改变的 dom 元素才会重新渲染。

2.6.3 v-for 的 key 的作用以及实现原理

1. 用 index 作为 key

!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>key 的原理</title>
script src="../js/vue.js"></script>
/head>
body>
div id="app">
<h1>{{msg}}</h1>
<button @click="addFirst">在数组第一个位置添加 tom</button>
<button @click="addLast">在数组最后位置添加 vue</button>
<table>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>邮箱</th>
    <th>选择</th>
  </tr>
  <tr v-for="(vip,index) of vips" :key="index">
    <td>{{index + 1}}</td>
    <td>{{vip.name}}</td>
    <td>{{vip.email}}</td>
    <td><input type="checkbox"></td>
  </tr>
</table>
</div>
<script>
  const vm = new Vue({
    el : '#app', 31. data : {
      msg : 'key 原理(虚拟 dom 与 diff 算法)', 33. vips : [
        {id:'100',name:'jack',email:'jack@123.com'}, 35. {id:'200',name:'lucy',email:'lucy@123.com'}, 36. {id:'300',name:'james',email:'james@123.com'}
      ]
    }, 39. methods : {
      addFirst(){
        this.vips.unshift({id:'400',name:'tom',email:'tom@123.com'})
      }, 43. addLast(){
        this.vips.push({id:'500',name:'vue',email:'vue@123.com'})
      }
    }
  })
</script>
</body>
</html>

运行效果：

全部选中：

添加 tom：

可以看到错乱了。思考这是为什么？
2. 用 vip.id 作为 key
运行和测试结果正常，没有出现错乱。为什么？
3. key 的作用
key 存在于虚拟 dom 元素中，代表该虚拟 dom 元素的唯一标识（身份证号）。
4. diff 算法是如何比较的？
新的虚拟 dom 和旧的虚拟 dom 比较时，先拿 key 进行比较：
(1) 如果 key 相同：则继续比较子元素：
1 子元素不同：直接将新的虚拟 dom 元素渲染到页面生成新的真实 dom 元素。
2 子元素相同：直接复用之前的真实 dom。
(2) 如果 key 不同：直接将新的虚拟 dom 元素渲染到页面生成新的真实 dom 元素。
5. index 作为 key 存在两个问题
(1) 效率较低。
(2) 对数组的非末尾元素进行增删时，容易错乱。
6. index 作为 key 和 vip.id 作为 key 对比
当 index 作为 key 时：

当 vip.id 作为 key 时：