key值出错,到底会引发什么样的bug?

99 阅读1分钟

问题背景

最棒妈妈小程序转为H5后,答题界面会出现如下bug

thoughts.teambition.com/workspaces/…

表现为:题目更新后,DOM不更新或更新之后会出现问题。

问题解析

根据Vue的双向数据绑定原则,视图除了问题,肯定是数据除了问题,于是我去查看数据

我发现,数据是更新了的,重置了的,为什么试图没有刷新成我预料之中的样子?如果是你,你会怎么看这个问题?

问题答案

先别着急,看看代码里的index是怎么写的,再想想Vue的Vdom Diff原理?

是的,我的key值并不唯一!

怎么解决key值唯一的问题

前端更多的是通过业务来做,比如1-1,2-1

随机数:

时间戳

后端(课外知识)

1.UUID:

c2b8c2b9e46c47e3b30dca3b0d447718

2.雪花算法

为什么小程序上更新正常?

小程序的diff算法原理