VUE3(五)列表渲染

v-for中key的作用

主要是在列表元素发生变化时用于最小代价地响应这种变化。

用到的算法为diff算法,主要维护变量i(从前往后匹配的位置),e1(旧列表的最后一个元素位置),e2(新列表最后一个元素位置)。

1.当新旧列表第i个元素的类型和key都相同时,递增i,否则退出循环

2.当旧列表的第e1个元素和新列表的第e2个元素相同时,e1–,e2–,否则退出循环

3.如果新列表长度大于旧列表,就插入剩余元素(i到e2之间)

4.如果新列表长度小于旧列表,就删除剩余元素(i到e1之间)

5.如果两个列表元素相同,就用一个映射来记录可以复用的元素,删除多余的并插入新的。

发表评论

您的电子邮箱地址不会被公开。