1.vue在渲染的时候,会先把新Dom和旧dom进行对比,如果结构一致,则vue会复用旧的dom这个时候可能造成数据渲染异常
2.使用key可以给dom添加一个标识符让vue强制更新dom比如有一个列表有li1到li4我们需要在中间插入一个li3,li1和li2不会从新渲染而li3 li4 li5都会从新渲染,因为在不使用key或者列表index作为key的时候每个元素对应的位置关系都是index直接导致我们插入的原数以及到后面的全部元素对应的位置都发生了变更,所以全部都会执行更新操作,而这使用唯一key的情况下,每个元素对应的位置关系就是key。
总结:Key的作用主要是为了更高效的更新虚拟dom,
还有他可以非常精确,会找到相同节点,因此patch过程会非常高效view在patch过程中会判断两个节点是不是相同节点时key是一个必要条件,比如渲染列表时如果不写key你也在比较的时候就可能会导致频繁更新元素,使整个过程比较低效,影响性能应该避免使用数组下标作为key因为key值不是唯一的话,可能会导致上面图中表示的bug使vue无法区分它,它还有比如在使用相同标签元素过度切换的时候就会导致只替换其内部属性而不会触发过渡效果,从源码里可以知道没有判断两个节点是否相同,是主要判断两者的元素类型和key等,如果不设置key就可能永远认为这两个是相同节点,只能去做更新操作,就造成大量不必要的dom更新操作,明显是不可取的,为什么不建议index索引作为key使用index作为key和没写基本上没区别,因为不管数组的顺序怎么颠倒index都是012这样排列,导致vue会复印错误的就此节点做很多额外的工作