Vue中v-for循环语句使用，以及其中key的原理
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
一、列表渲染
在vue中v-for的使用还是非常的广泛。在我们使用v-for的场景中，使用最多的就是用来渲染列表。渲染的数据主要有数组、对象、字符串等。 常用的三种：
- 遍历数组
- 迭代对象
- 字符串
- 遍历指定次数
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue/js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
<h2>人员列表（数组遍历）</h2>
<ul>
<li v-for="p in persons" :key='index'>
{{p.name}}--{{p.age}}
</li>
</ul>
<h2>老王（ 对象遍历）</h2>
<ul>
<li v-for="p in man" :key="index">
{{p}}
</li>
</ul>
<h2>字符串遍历</h2>
<ul>
<li v-for="p in str" :key="index">
{{p}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
man:{
name:'老王',
age:30,
hobby:'干饭'
},
str:'maoxiaoqian',
}
})
</script>
</body>
</html>
小结 v-for指令：
- 大多数用于展示数据
- 基本的语法
v-for="（item,index ）in persons" :key='index',item为每一项的value值，index为vue给定的标识符，每一个v-for都应该绑定:key为标识符，或者说是索引值，这个索引值应该是唯一的。 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id
二、key的原理
key的原理主要就是vue中的Diff算法
-
vue和react一样，都实现了一套虚拟dom,使我们可以不直接操作dom元素，只操作数据就可以重新渲染页面。这就用到Diff比较算法。
-
虚拟DOM中key的作用: key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较
-
对比规则： 旧虚拟DOM中找到了与新虚拟DOM相同的key:
- 若虚拟DOM中内容没变,直接使用之前的真实DOM !
- 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DON。 旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM,随后渲染到到页面。
-
用index作为key可能会引发的问题:
-
若对数据进行:逆序添加、逆序删除等破坏顺序操作;
-
会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
-
如果结构中还包含输入类的DOM:会产生错误DOM更新==>界面有问题。
- 开发中如何选择key呢?
- 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一的标识符。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
写在最后
今日收到的掘金短信【愿你有前进一寸的勇气，亦有后退一尺的从容，晚安。】
感动了掘金大大。
