虚拟DOM中key 的作用
- key 是虚拟 DOM 对象的标识,可提高页面更新渲染的效率。
- 当状态中的数据发生变化时,React 会根据新数据生成新的虚拟 DOM ,接着对新旧虚拟 DOM 进行 Diff 比较,规则如下:
旧虚拟 DOM 找到和新虚拟 DOM 相同的 key: 若内容没变,直接复用真实 DOM;若内容改变,则生成新的真实 DOM,替换页面中之前的真实DOM
旧虚拟 DOM 未找到和新虚拟 DOM 相同的 key:根据数据创建新的真实 DOM ,渲染到页面
使用 index 作为 key 可能引发的问题:
- 若对数据进行逆序添加、逆序删除等破坏顺序的操作,会进行没有必要的真实 DOM 更新。界面效果没问题,但效率低下。
- 如果结构中包含输入类的DOM(如 input 输入框) ,则会产生错误的 DOM 更新。
- 若不存在对数据逆序添加、逆序删除等破坏顺序的操作,且没有输入类DOM,使用index则没有问题。
vue2和vue3的响应式原理