是否复用VNode依据?源码中sameVnode方法逻辑

大家看我点这个是的话

会在第1题和第2题中间插入一道题

但是呢bug是这个题目显示的不对

数据是对的

原因就是啊他这个(v-for)key用的不对

他用的是这个index

因为啊原来这个第2题的index就是

我们新插入的这个第2题的index还是

那为什么这个相同的key

会有这个问题呢

(之前我们视频也提到过)

vue会共用虚拟节点(VNode)

我们可以来看一下

源码里的这部分逻辑哈

sameVnode的方法就是来决定

这个虚拟节点能不能被共用(复用)

大家看它首先比较的就是这个key值

key值不相等一切都免谈

然后呢他再去比较这个tag

然后是不是一个注释节点、是不是非空

然后比较input节点里边的type值

然后下边这个呢

它是用来兼容异步占位符

我们先不管它

主要呢就是比较key

然后tag

tag相等并且是input情况下呢

它会比较里边的type值

所以呢我们再回到刚才这个逻辑

来看一下他这个题的数据结构哈

他在这个question里边展开他

大家看,他有ID

一般这种情况用ID都不会出问题

所以呢我们在这儿

把它换成item.questionId

再来试一下

点是,大家看就没问题了

最后更新于