需求
假设存在列表,对应其中的元素为a, b, c, d, e
现在想在b后边插入一个值为f的li节点
此时vue就会根据是否存在对应的唯一的key
而做出不同的操作
在Vue中,对于相同父元素的子元素节点并不会重新渲染整个列表,因为在整个列表中其实存在很多元素是相同的,可能只是位置发生了改变,重新删除并创建整个元素看起来是没有必要的
vue在没有key的时候会依次进行遍历
a节点和b节点是没有任何的改变的,所以vue会对其进行复用
比对到c节点的时候,因为没有key,所以vue并不知道c节点仅仅只是移动了位置
所以此时vue会将c节点的内容修改为f
d和e节点执行和c节点类似的操作
新建一个节点,将节点的值设置为e
从头开始进行遍历,复用可以复用的元素
a和b是一致的,vue会复用a节点和b节点
c和f因为key不一致,所以就会break跳出循环
从后向前进行遍历,复用可以复用的元素
如果旧节点遍历完毕,但是依然有新的节点,那么就新增节点
如果新的节点遍历完毕,但是依然有旧的节点,那么就移除旧节点
如果中间还有很多未知的或者乱序的节点,vue会使用最长递增子序列等方法,尽可能的移动节点以找到最长的可以复用的子序列进行复用
所以Vue在进行diff算法的时候,会尽量利用我们的key来进行优化操作。在进行插入或者重置顺序的时候,为元素添加唯一的key可以让diff算法更加的高效
此时vue就会根据是否存在对应的唯一的key
而做出不同的操作
在Vue中,对于相同父元素的子元素节点并不会重新渲染整个列表,因为在整个列表中其实存在很多元素是相同的,可能只是位置发生了改变,重新删除并创建整个元素看起来是没有必要的
转自稀土掘金