vue--遍历列表时key的作用(index或者id作为key的不同效果与弊端)---面试题

1.虚拟DOM中key的作用:

key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据新数据生成新的虚拟DOM,随后Vue进行新旧虚拟DOM的差量比较,比较规则如下:

2.对比规则:

1. 旧虚拟DOM中找到与新虚拟DOM中相同的key:
   • 若虚拟DOM对象中内容没有发生改变,直接使用之前的真实DOM
   • 若虚拟DOM对象中内容改变了,则生成新的真实DOM,随后替换掉页面之前的真实DOM
2. 旧虚拟DOM中未找到与新虚拟DOM中相同的key:
   • 创建新的真实DOM,渲染到页面上

遍历列表时,没有key

如果没有写key,遍历时vue自动帮你补了一个key,将遍历的索引index作为了key

遍历列表时,有key

1.将索引index作为key 将老刘这个数据在要遍历的数组前面插入,index索引会发生变化,新旧虚拟DOM对比(vuediff算法),会根据新的虚拟DOM生成新的真实DOM,找key="0"的元素,不同的进行更新,相同的拿过来,所以出现的结果会如下图:

如果是将老刘这个数据在要遍历的数组后面插入,顺序依次执行,新旧虚拟DOM中前面数据的key值没有发生改变,所以数据不会错乱

弊端:就是数据向前插入时,index索引作为key时,数据都没有复用,效率就会比较低

2.将唯一标识id作为key 将老刘这个数据无论放在要遍历的数组前面或后面插入,id作为key都不会发生变化,顺序都一样,新旧虚拟DOM对比(vuediff算法)时,会根据新的虚拟DOM生成新的真实DOM,找key="004"的元素,没有的进行更新,相同的拿过来,所以出现的结果会如下图:

开发中key的选择建议:

- 1.最好选择每条数据的唯一标识作为key,比如id ,手机号, 身份证号,学号等唯一值
- 2.如果不存在对数据的逆序添加,逆序删除等破坏顺序的操作,仅用于了列表展示,使用index索引作为key也是没有问题的