尽可能的复用DOM!!!!!!!!!!!!!!!!!!!!!
react/vue 项目为什么要在列表加key,作用是什么?
key 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。
key 值是每一个 vnode 的唯一标识,依靠 key,我们可以更快的拿到 oldVnode 中相对应的节点
不使用 key
,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素
的算法。(就地更新策略)
tip
:可以提高性能,但有安全隐患,对于依赖于子组件状态或者临时 DOM 状态的,这种模式是不适用的,
比如渲染一个数组,然后把第一条的颜色改为红色,再去删除第一条数据,第一条还是红色样式
使用 key 时
,它会基于 key 的变化重新排列元素顺序
tip
:可以用于强制替换元素/组件而不是重复使用它,完整地触发组件的生命周期钩子,触发过渡。
比如渲染一个数组,然后把第一条的颜色改为红色,再去删除第一条数据,第一条不是红色样式