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)若对数据进行逆序添加,逆序删除hi破坏顺序操作,会产生没有必要的真实的dom更新==》界面效果没问题,但效率低。

(2)如果结构中还包含输入类的dom:会产生错误dom更新==》界面有问题

4.开发中如何选择key?

(1)使用唯一标识key。如id,手机号,邮箱号,身份证号,学号等。

最新文章

  1. SLP的模块结构
  2. CLR VIA
  3. BZOJ-3226 校门外的区间 线段数+拆点(类似的思想)
  4. 什么是Nib文件?(Nib文件是一种特殊类型的资源文件,它用于保存iPhone OS或Mac OS X应用程序的用户接口)
  5. Android之旅:梦想、学习、坚持、自信、淡定
  6. [搜索] hdu 4016 Magic Bitwise And Operation
  7. Java实现Windows平台下Ping的最佳方法
  8. oracle 数据库(表)的逻辑备份与恢复
  9. Spring基于注解注入的两种方式
  10. JSONObject基本内容(三)
  11. 迭代加深搜索(以Power Calculus POJ--3134 UVa--1374为例)
  12. Jmeter --- 组件执行顺序与作用域
  13. js中return ,return true,return false;区别
  14. django模板系统(下)
  15. ISCSI target的两种安装方法
  16. [CTSC2006]歌唱王国
  17. linux系统下cpu信息的查看
  18. numpy 小示例
  19. Hashtable 和 HashMap 以及 ConcurrentHashMap
  20. 获取网站资源 getResourceAsStream

热门文章

  1. ESP32 IDF 获取天气信息
  2. 九、docker swarm主机编排
  3. 【Azure 环境】Azure 云环境对于OpenSSL 3.x 的严重漏洞(CVE-2022-3602 和 CVE-2022-3786)的处理公告
  4. php统一的gocheck方法
  5. 【云原生 · Kubernetes】部署高可用 kube-controller-manager 集群
  6. i春秋Upload
  7. Cacheable VS Non-Cacheable
  8. Aspose.Cells实现excel预览
  9. Oracle plsql Database links
  10. JavaScript入门④-万物皆对象:Object