key 的作用是为了在 diff 算法执行时更快的找到对应的节点，提高 diff 速度
​


​

  • vue 的 key 的值加的区别

vue 中循环需加 :key=“唯一标识” ，唯一标识可以使 item 里面 id index 等，因为 vue 组件高度复用增加 key 可以标识组件的唯一性，为了更好地区别各个组件 key 的作用主要是为了高效的更新虚拟 DOM

  • 不加的 key 的值得区别

不带有 key，并且使用简单的模板，基于这个前提下，可以更有效的复用节点，diff 速度来看也是不带 key 更加快速的，因为带 key 在增删节点上有耗时。这就是 vue 文档所说的默认模式。但是这个并不是 key 作用，而是没有 key 的情况下可以对节点就地复用，提高性能。这种模式会带来一些隐藏的副作用，比如可能不会产生过渡效果，或者在某些节点有绑定数据（表单）状态，会出现状态错位。VUE 文档也说明了。还有就是 key 的作用是为了在 diff 算法执行时更快的找到对应的节点，提高 diff 速度
总结
key 的作用主要是为了高效率的更新虚拟 DOM。另外 vue 中在使用相同标签名元素的过渡切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们，否则 vue 只会替换其内部属性而不会触发过渡效果。