vue中列表如何使用唯一key

这篇文章主要为大家展示了“vue中列表如何使用唯一key”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中列表如何使用唯一key”这篇文章吧。比如有一个列表，我们需要在中间插入一个元素，在不使用 key 或者使用 index 作为 key 会发生什么变化呢？先看个图如图的li1和li2不会重新渲染，这个没有争议的。而li3、li4、li5都会重新渲染因为在不使用key或者列表的index作为key的时候，每个元素对应的位置关系都是 index，上图中的结果直接导致我们插入的元素到后面的全部元素，对应的位置关系都发生了变更，所以在 patch 过程中会将它们全都执行更新操作，再重新渲染。这可不是我们想要的，我们希望的是渲染添加的那一个元素，其他四个元素不做任何变更，也就不要重新渲染而在使用唯一key的情况下，每个元素对应免费云主机、域名的位置关系就是key，来看一下使用唯一key值的情况下这样如图中的li3和li4就不会重新渲染，因为元素内容没发生改变，对应的位置关系也没有发生改变。这也是为什么 v-for 必须要写 key，而且不建议开发中使用数组的 index 作为 key 的原因以上是“vue中列表如何使用唯一key”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: CSS边框使用技巧有哪些

这篇文章主要介绍“CSS边框使用技巧有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS边框使用技巧有哪些”文章能帮助大家解决问题。 　　1. 动画CSS边框 　　当我们想使我们的项目更可见时，该怎么办？ 　　来…