<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>v-for-绑定和非绑定key的区别</title>
</head>
<body>
<div id="app">
<ul>
<!-- :key作为唯一标识，推荐使用item
因为item与后面遍历出来的内容对应
由于item有可能重复，因此当重复的时候，就会有浏览器报错
-->
<li v-for="(item,index) in arr" :key="item">{{item}}—{{index}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
//官方推荐我们在使用v-for的时候，给对应的元素或者组件添加上一个:key属性
//当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
//假如数组如下arr:[‘A’,’B’,’C’,’D’,’E’]
//我们希望可以B和C之间插入一个F
//触发的diff算法默认执行是：C更新为F，D更新为C，E更新为D，最后再插入E，因此十分没有效率
//Vue推荐我们使用:key给每个节点做唯一性的标识
//当有了新的标识之后，vue的diff算法就能够正确的识别这个节点
//之后找到正确的位置插入新的节点
//重点：key的作用主要是为了高效的更新虚拟DOM
let app = new Vue({
el:’#app’,
data:{
arr:[‘A’,’B’,’C’,’D’,’E’],
},
})
</script>
</html>
