对key值的理解

141 阅读1分钟

react,vue中的key有什么作用?

1. 虚拟dom中key的作用

key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据[新数据],生成[新的虚拟dom] 随后vue进行[新的虚拟dom]与[旧的虚拟dom]差异比较

2. 对比规则

(1).旧的虚拟dom找到了与新虚拟dom相同的key

  • 若虚拟dom中内容没变,直接使用之前的真实dom
  • 若虚拟dom中的内容变化了,则生成新的真实dom,替换掉页面中的dom (2).旧的虚拟dom未找到与新的虚拟dom相同的key -创建新的真实dom,渲染到页面

3.用index作为key的弊端

(1).若对数据进行:逆序添加,逆序删除等破坏顺序操作:

  • 会产生没有必要的真实dom更新==>界面效果没有问题,但效率低 (2).若结构中包括输入类的dom
  • 会产生错误dom更新==>界面有问题

4.开发中如何选择key

(1).最好使用唯一的key 如:id,手机号,学号等 (2).如果不存在对数据的逆序添加等破坏顺序的操作,仅用于渲染列表用于展示 使用index作为key也没有问题