天天看点

vue项目中,列表组件为什么要写key抛出结论,写key是为了高效的更新虚拟DOM渲染列表的时候,为什么要写key,并且值是id或者index这种唯一的标识

抛出结论,写key是为了高效的更新虚拟DOM

渲染列表的时候,为什么要写key,并且值是id或者index这种唯一的标识

diff算法

对操作前后的dom树同一层的节点进行对比,一层一层对比,如下图

vue项目中,列表组件为什么要写key抛出结论,写key是为了高效的更新虚拟DOM渲染列表的时候,为什么要写key,并且值是id或者index这种唯一的标识

假如不写key,在一个列表插入新元素 

vue项目中,列表组件为什么要写key抛出结论,写key是为了高效的更新虚拟DOM渲染列表的时候,为什么要写key,并且值是id或者index这种唯一的标识

一层一层比较

vue项目中,列表组件为什么要写key抛出结论,写key是为了高效的更新虚拟DOM渲染列表的时候,为什么要写key,并且值是id或者index这种唯一的标识

过程是F替换C,C替换D,D替换E,再最后插入E,但实际上只是新插入了一个F而已。

如果写了key,结果怎么样呢

vue项目中,列表组件为什么要写key抛出结论,写key是为了高效的更新虚拟DOM渲染列表的时候,为什么要写key,并且值是id或者index这种唯一的标识

结果就是,写key是为了高效的更新虚拟DOM