-
前言
一切学习都是为了加薪; 为了跟直观的带大家了解diff
附上一张很久都不舍得扔的手抄纸, 尽管字那么丑
简述key的作用
我们都知道在
v-for的时候会让我们加key并赋值唯一标示, 但是这个key的作用是什么? 坐好小板凳 我们细细道来
key 其实就是虚拟dom中的标识; 当状态发生变化时, 在react 、vue中数据会生成新的虚拟dom与旧数据的虚拟dom的diff 进行比较.从而减少消耗;
那么diff中比较的规则又是什么样的呢? 为什么不推荐用index 作为key呢?
diff 规则
-
若
旧虚拟dom找到了与新虚拟dom的key相同:- 若虚拟dom中内通过没变,则直接返回; 使用之前的真实dom
- 若虚拟dom中的内容发生变化; 则生成新的真实dom; 随后替换掉页面中之前的真实dom
-
若
旧虚拟dom未找到与新虚拟dom相同的key- 会根据数据创建新的真实dom; 然后渲染到页面中
新虚拟dom跟旧虚拟dom 对比
为什么不推荐index 作为key; 究竟会引发什么问题?
- 若对数据进行处理
逆序添加、逆序删除等破坏操作, 会产生没必要的真实dom产生(页面效果没有问题; 但是效率低下) - 如果结构中包含了
input输入类等真实dom, 则会产生错误dom更新; (页面数据显示错误) - 如果数据不存在
逆序添加、逆序删除操作, 仅用于渲染展示; 使用index则不会出现问题!
日常开发中最好还是使用每条数据中的唯一性标识作为key; 但是只是为了展示; index 也是可以的
欢迎一起留言讨论; 多健身不掉头发哦~
