vue中key的作用

vue中key的作用

作用

作用是为了更高效的更新虚拟DOM

必要性

vue在patch过程中判断两个节点是否为相同节点，key是一个必要条件，渲染一组列表时key往往是唯一标识，如果不定义key，vue会认为比较的两个节点是同一个（哪怕不是），这会导致频繁更新元素，使得整个patch过程比较低效，影响性能

实际使用方式

实际使用中在渲染一组列表时key必须设置，而且是唯一标识，应避免使用数组索引作为key，因为这可能会导致一些隐藏的bug；vue在相同标签元素过渡切换的时候也会使用可以，目的也是让vue能够区分它们，否则vue只会替换其内部属性，而不会触发过渡效果

总结

不建议使用数组索引作为key的原因：
1、在进行向数组中间插入或删除数据时，数组长度发生了变化，每个值对应的索引也会发生变化，在进行diff比对时会发现新老节点对应key的位置内容发生了变更，会从新进行渲染，造成不必要的性能损失，
比如老数组为[‘张三’, ‘李四’]，那么渲染出来key=0对应张三，key=1对应李四，对其首部插入一个王五，让数组变成[‘王五’, ‘张三’, ‘李四’],新节点和老节点比对时会发现key=0变成了王五，key=1变成了张三，key=2是李四，就会重新渲染key=0和1对应位置的值，新增key=2的李四
2、在列表内部有其他子节点时，当这个子节点不变时vue会直接复用
比如初次渲染第一个li渲染的人名后面用input输入’真帅啊‘
<li>{{ name }} <input value='真帅啊'> </li> ，第二个li的人名后用input输入’真丑啊‘<li>{{ name }} <input value='真丑啊'> </li>，那么老数组就会渲染出 张三真帅啊，李四真丑啊，手动向新增王五之后，只是人名发生变化，重新渲染，但是修饰语input并没有变，直接复用，最终会渲染出王五真帅啊，张三真丑啊，最终渲染结果出错