看完你也能弄懂diff算法规则! 简述key的作用?

• 前言

一切学习都是为了加薪; 为了跟直观的带大家了解diff

附上一张很久都不舍得扔的手抄纸, 尽管字那么丑

简述key的作用

我们都知道在v-for的时候会让我们加key并赋值唯一标示, 但是这个key的作用是什么? 坐好小板凳 我们细细道来

key 其实就是虚拟dom中的标识; 当状态发生变化时, 在react 、vue中数据会生成新的虚拟dom与旧数据的虚拟dom的diff 进行比较.从而减少消耗;

那么diff中比较的规则又是什么样的呢? 为什么不推荐用index 作为key呢?

diff 规则

• 若旧虚拟dom 找到了与新虚拟dom的key 相同:

  1. 若虚拟dom中内通过没变,则直接返回; 使用之前的真实dom
  2. 若虚拟dom中的内容发生变化; 则生成新的真实dom; 随后替换掉页面中之前的真实dom

• 若旧虚拟dom未找到与新虚拟dom相同的key

  1. 会根据数据创建新的真实dom; 然后渲染到页面中

新虚拟dom跟旧虚拟dom 对比

为什么不推荐index 作为key; 究竟会引发什么问题?

1. 若对数据进行处理逆序添加、逆序删除等破坏操作, 会产生没必要的真实dom产生( 页面效果没有问题; 但是效率低下)
2. 如果结构中包含了input输入类等真实dom, 则会产生错误dom更新; (页面数据显示错误)
3. 如果数据不存在逆序添加、逆序删除操作, 仅用于渲染展示; 使用index则不会出现问题!

日常开发中最好还是使用每条数据中的唯一性标识作为key; 但是只是为了展示; index 也是可以的

欢迎一起留言讨论; 多健身不掉头发哦~