这个问题,其实也是经常问的,对于刚刚毕业的大学生来说,
面试官问:vue中循环遍历数组的时候,为什么要加 key/key的作用是什么?
看一下官网的回答
- key属性主要在 vue 的虚拟 DOM算法,在 新旧 nodes 对比时 辨识 VNodes
- 如果不使用 key,vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地 修改/复用 相同类型元素的算法
- 而使用 key 它会基于 key 的变化 重新排列元素顺序,并且会 移除/销毁 key 不存在的元素
VNode 的全称 是 Virtua Node ,也就是虚拟节点
事实上,无论是组件还是元素,他们最终在 Vue 中表示出来的都是一个个 VNode
VNode 的本质就是一个 JavaScript 的对象
VNode 最大的好处 就是跨平台
diff 算法,就是 新的 vnodes 和 旧的 vnode 做一个对比,看看哪里发生了变化 ,再去更改,那个变化的东西
1、如果 key 使用 index(索引)等于 没有定义 key
key 最好是一个唯一的值,项目开发中,一般都是用 id,如果你用 index 其实和没加没啥区别,就是 不让他警告了而已
- 先进行比较 (假设,新:[a,b,f,c,d,],旧:[a,b,c,d])
- 从 第一个元素 开始比较,如果 相等 则不做任何更新
- 若不一样 , (索引是2的时候,旧的是 c ,新的是f,内容不一样,则更新它的内容)
- d 和 c 也要更新,
- 然后 新的 还多出来 一个 d ,则创建一个 d ,在挂载到 里面,然后渲染即可
2、如果设置了 key
- 从头开始遍历、比较 a、b 是一致的,然后是 c 和 f 不一致 ,就会跳出循环
- 从尾部 开始进行遍历、比较
- 如果是 旧节点遍历完毕,还有新的节点,那么就新增节点
- 如果是 新的节点遍历完毕,但是还有 旧的节点,那么就移除旧的节点
- 如果中间还有很多未知或者乱序的节点
3、总结
可以这样回答
- 首先是 提高 虚拟DOM 的渲染效率
- 第二点,可以分析一下,有 key 和 没有 key 的 渲染过程