三（1）、指令之 v-for ------ 2020-04-18

1、v-for

1、v-for  // 循环数组、对象、数字
2、v-bind // 绑定属性
3、template
// vue自带的标签 无意义的标签，不能给template标签添加key属性
// 需要给真实的DOM添加key属性


// 所有指令中的值都是我们的变量，如果我们想放字符串，需要
// 加双引号；

// 多个元素需要添加不同的key区分元素名称，而且可以使用模板字符串
<template v-for="(val, index) in arr">
    <li :key="index+ '-1'" :a="index+ '-1'"></li>
    <li :key="index+ '-2'" :a=`${index} + '_2'`></li>
</template>

为什么v-for循环数据的时候，不要给循环项绑定动态的key
let arr = ['橘子', '苹果', '香蕉']

<li :key="1">橘子<li>
<li :key="2">苹果<li>
<li :key="3">香蕉<li>

如果我们对数据进行了反转
<li :key="1">香蕉<li>
<li :key="2">苹果<li>
<li :key="3">橘子<li>

重新渲染的时候，Vue虚拟DOM会比对li的key属性，发现第一个
li，key属性没变，都是1，只是内容变了，就直接复用之前的li，
然后重新渲染下li中的内容；重新渲染要消耗性能的；

<----- 绑定唯一key  ----->
let arr = ['橘子', '苹果', '香蕉']

<li :key="j">橘子<li>
<li :key="p">苹果<li>
<li :key="x">香蕉<li>

如果我们对数据进行了反转
<li :key="x">香蕉<li>
<li :key="p">苹果<li>
<li :key="j">橘子<li>

重新渲染的时候，Vue DOM diff 的时候，发现标签还是原来的
标签，内容还是原来的内容，那么就不需要重新渲染元素，而是
通过移动DOM的位置，来实现页面的更新，移动DOM比重新渲染
要节省很多性能