Vue中的key

虚拟DOM的diff算法的两个假设

1 .两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构
2 .同一层级的一组节点，他们可以通过唯一的id进行区分

比较法则

1 .当页面数据发生变化时，diff算法只会比较同一层级的节点
2 .如果节点类型不同，直接干掉前面的节点，创建并插入新的节点，不在比较这个节点后面的子节点
3 .如果节点类型相同，就会重新设置该节点的属性，实现节点的更新

1 .当某一层有很多相同的节点的时候，比如一堆列表，就是遵循上面的原则进行更新的
2 .加入一个新的节点
3 .想要的是直接新建一个，插入到中间，但是实际上是c更新成f，d更新成c,e更新成d，然后新建一个e
4 .所以需要给每一个节点加一个key来标记，diff算法就能正确识别这个节点，找到正确的位置插入新的节点

image image image

删除的时候的实际操作

1 .不加key的时候，删除2号元素

image image

2 .实际逻辑：渲染数据由[1,2,3]变为[1,3]
3 .比较1渲染出来的虚拟dom结构，前后一样，不变
4 .比较2，3渲染出来的虚拟dom，使用2原来的dom结构，用3的数据替换2的数据
4 .比较3和undedined:删除3dom
5 .破解方法：使用id作为key

1 .开始数据 :[{id:1,value:1},{id:2,value:2},{id:3,value:3}]
2 .变化数据:[{id:1,value:1},{id:3,value:3}]
3 .直接看出id从123，变为13，说明第二项删除了
4 .然后依次对id：1和id:3的项，发现每变化

6 .不能使用index作为key

1 .使用index作为key,当删除元素的时候，之前的index会发生变化，也就是说index作为key是会动态变化的。
2 .还是会遇到和上面一样的bug

key的作用

1 .更加高效的更新虚拟DOM，在vue中使用相同签名元素的过渡切换时，可以区分前后的元素，vue只会替换内部元素而不会触发过渡效果
2 .key不会提高性能,相反,没有key性能才会高.没有key的时候,Vue使用"就地更新"的策略.数据项的增加和减少,顺序改变,Vue会使用一种算法来最小化元素的移动并尽可能尝试的就地修改/复用相同类型的元素.
3 .当有了key之后,可以跟踪每个节点的身份,会基于key的顺序变化重新排列元素,那些使用了已经不存在的key的元素将被移除/销毁.key可以用来强制替换元素而不是重复使用他.
4 .主要有以下场景

1 .完整的触发组件的生命周期钩子
2 .触发过渡

<transition>
  <span :key="text">{{ text }}</span>
</transition>
//当text变化的时候span总是会被替换而不是被修改,所以会触发过渡.