react/vue 项目为什么要在列表加key,作用是什么

尽可能的复用DOM!!!!!!!!!!!!!!!!!!!!!

react/vue 项目为什么要在列表加key,作用是什么?

key 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
key 值是每一个 vnode 的唯一标识，依靠 key，我们可以更快的拿到 oldVnode 中相对应的节点

不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。(就地更新策略)
tip:可以提高性能,但有安全隐患,对于依赖于子组件状态或者临时 DOM 状态的，这种模式是不适用的,
比如渲染一个数组,然后把第一条的颜色改为红色,再去删除第一条数据,第一条还是红色样式

使用 key 时，它会基于 key 的变化重新排列元素顺序
tip:可以用于强制替换元素/组件而不是重复使用它,完整地触发组件的生命周期钩子,触发过渡。
比如渲染一个数组,然后把第一条的颜色改为红色,再去删除第一条数据,第一条不是红色样式