|
1. 先说结论 - key在Vue是DOM对象的标识；
- 进行列表展示时，默认key是index；
- 如果数据只做展示使用，使用index作为key是没有任何问题的；
- 如果使用index作为key，而后续操作会破坏顺序，一定会带来效率问题，严重时会渲染出错误的DOM
关于key的作用及实现原理，下面一一道来。
2. key的作用key就是一个标识，被使用在Vue中。再详细一点，key被使用在Vue中的虚拟DOM中，并不会出现在真实DOM中。
2.1 举一个例子以列表的形式展示一组人员信息。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>key的原理</title> <!--引入vue--> <script type="text/javascript" src="../js/vue.js"></script> </head><div id="root"> <h2>人员列表</h2> <ul> <li v-for="(p,index) in persons"> {{p.name}}-{{p.age}} </li> </ul></div><body> <script type="text/javascript"> const vm = new Vue({ el:'#root', data:{ persons:[ {'id':'001', 'name':'张三','age':'18'}, {'id':'002', 'name':'李四','age':'19'}, {'id':'003', 'name':'王五','age':'20'} ] } }) </script></body></html>这个html文件在浏览器中打开如下图所示。 
而上述示例html文件中并没有使用到key，似乎也没有问题。当然，单纯地展示数据，不写key是不会存在问题的。 现在我们为上述示例加上key，这里以每条数据的id为key <li v-for="(p,index) in persons" :key="p.id"> {{p.name}}-{{p.age}}</li>加上key的展示结果和上图结果一模一样。 
而如果我们在浏览器上查看元素，不会看到key的存在。 
截至目前，我们可以得到两个结论：1. 只做数据展示用，不写key是没有任何影响的；2.key不会出现在真实DOM中 实际上，即使不写key，Vue在生成真实DOM时，也用到了key，默认是数据索引（index） 我们把key替换为index，展示的数据不会产生任何改变。 <li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}}</li>
2.2 修改一下上述示例在展示人员信息的基础上显示索引，并且添加一个按钮，功能是在头部添加人员信息 对上述html文件稍加修改。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>key的原理</title> <!--引入vue--> <script type="text/javascript" src="../js/vue.js"></script> <link rel="icon" href="../favicon.ico" type="image/x-icon" /></head><div id="root"> <h2>人员列表</h2> <button @click="add">添加一个老刘</button> <ul> <li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}}-{{index}} </li> </ul></div><body> <script type="text/javascript"> const vm = new Vue({ el:'#root', data:{ persons:[ {'id':'001', 'name':'张三','age':'18'}, {'id':'002', 'name':'李四','age':'19'}, {'id':'003', 'name':'王五','age':'20'} ] }, methods:{ add(){ const p = {'id':'004', 'name':'老刘','age':'40'} this.persons.unshift(p) } } }) </script></body></html>我们可以看到，张三、李四、王五的索引分为别0，1，2 
点击按钮，添加一个新人物，这个时候索引发生了变化，新添加的人物“老刘”变为了索引0，似乎对，也似乎不对 
当然，单纯地讨论索引，这里一点问题也没有，下面举一个新例子，来说说“不对“在哪里
2.3 再修改一下示例不展示索引了，改为输入框，在每个人物后面的输入框内写上人物的姓，观察新插入数据后原始数据的变化 稍微修改一下html <li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}} <input type="text"></li>实际效果就是下图这样 
到这里，似乎没有什么不对，接下来就是见证奇迹的时刻 添加老刘，出现了问题，和我们预想的不一样。 
这是key为index的情况，如果修改为数据的唯一标识，则不会产生这样的问题。 <li v-for="(p,index) in persons" :key="p.id"> {{p.name}}-{{p.age}} <input type="text"></li>诶，这就是我们想要的。 
列表内有输入内容，后续操作会破坏原始顺序，就会产生错误DOM
3. key的实现原理要解释key的实现原理，就要引入Vue一个十分重要的概念
下载地址:
Javascript基础:运算符与流程控制详解
JavaScript工厂模式详解 |
