Vue中key

相信很多小伙伴跟我一样在使用v-for的时候对key值的存在和必要性有疑问,通过ESlint进行代码检查的时候不加上key还会报错,想知道key为什么存在可以先想想key为什么产生,会不会是尤雨溪灵光一闪就给Vue添加上了key?也有可能,不过存在即为合理,咱们来看看key的合理性。

官方的相关解释

key使用在Vue的虚拟DOM算法,在新旧vNodes(虚拟节点)对比的时候对节点进行辨别。

如果不使用key,Vue会使用最大限度减少动态元素并且尽可能修改复用相同类型元素;

如果使用key,Vue会基于key的变化重新排列元素顺序,并且移除/销毁key不存在的元素;

乍一看上面的内容,确实不易理解,咱们通过底层代码的实现逻辑来学习一下key。下文A代表旧的虚拟节点数组,A1代表新的虚拟节点数组,a代表旧的虚拟节点,a1代表新的虚拟节点

无key时的逻辑

分为三个步骤

1.比较A和A1之间的长度,找出较短的数组;

2.如果对比的时候,新旧虚拟节点的类型和内容完全一致,那就不需要改变a1对应的内容,直接进行patch即可;

3.如果A1的长度比A的数组长度短,那么就卸载抛弃多余的节点,

如果A1的长度比A的数组长度长,那么就增加新的节点。

有key时的逻辑

分为五个步骤

1.通过while循环从首部开始比较,拿到a和a1,比较两者的type和key是否相同,如果相同,就直接patch复用,如果a和a1不同,进行下一步;

2.通过while循环从尾部进行比较,拿到a和a2,比较两者的type和key是否相同,如果相同,还是直接复用,如果不同,进行下一步;

3.如果A1的长度比A的长度大,通过mount挂载新的节点;

4.如果A1的长度比A的长度小,通过unmount卸载移除节点;

5.中间无序部分,通过key指引的方式来进行,如果有相同的key,就直接通过key进行patch操作,如果key与在原来A的位置不同,通过移动的方式进行操作,如果A+有多或者少,通过挂载后者移除操作。

这个步骤的顺序也不难理解,我们做事情也是从前往后,小时候如果在班里比较调皮座位就会被调到前面,从后往前,有名单册的点名和没有名单册的点名,效率不同。

心得体会

一个效果从设想到代码实现需要很多思考,想想key的实现步骤就有好多,由物到人,愿意等你把说出来的变成做出来的人也难能可贵,且行且珍惜。

你可能感兴趣的:(VUE,JS,vue.js,javascript,前端)