请问vue的v-for不加key具体会出现什么情况呢

当 Vue 更新已使用 v-for 渲染的元素列表时,默认会采用“就地填充”策略。如果数据项的顺序发生了变化,不是移动 DOM 元素来匹配列表项的顺序,Vue 会将每个元素填充到恰当的位置,并且确保最终反映为,在该特定索引处放置应该呈现的内容

这是文档里的说法,可是一直没有遇见过具体的错误情况,我不加key,修改循环的数组的时候好像也没什么问题,有大佬可以解惑一下吗

阅读 16.3k
6 个回答

说实话,一两句话说不清楚,要深究这个问题牵扯的有点儿多,在知乎上找了篇文章,看能不能对你有所帮助!https://www.zhihu.com/questio...

倒不会出现什么明显的问题,只是对 Vue 来说有 key 会让它的性能更好。
不过在使用 transition 的时候的确可能会出现看得见的问题。

  • 控制台d黄色警告(个人不喜欢警告和报错)
  • <transition-group>下面不加的话,抛异常

会报警告~
既然推荐要加上key就加上吧,实在没有key把v-for的index作为key

key是用来标识唯一的吧,如果不加,vue在某些情况下,比如切换会话渲染不同人的聊天记录,会复用之前的节点,至少我遇到过聊天记录的最上面一行分割时间(每个会话都有这行)时,出现过这问题,我是加上key之后解决了

新手上路,请多包涵

好像官方说的是优化性能,根据唯一的索引值进行改变,其他不涉及到的就触发计算之类的

推荐问题
宣传栏