Vue中 v-for 绑定key和不绑定key的区别

Posted adongyo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中 v-for 绑定key和不绑定key的区别相关的知识,希望对你有一定的参考价值。

首先,它们区别主要在于 虚拟DOM的复用,绑定key可以更好的复用,下面来详细讲一下

假如我们有一个数组 arr = [1,2,3,4],我们要在2后面插入一个值9;

如果绑定了key值,那么会是这样的情况:

技术图片

如果没有绑定key值,那么会是这样的情况: 

技术图片

 

以上是关于Vue中 v-for 绑定key和不绑定key的区别的主要内容,如果未能解决你的问题,请参考以下文章

Vue 绑定数组 显示的差异 index 与 item

Vue.js 绑定性能差

【面试题解析】从 Vue 源码分析 key 的作用

在 vue 项目中,v-for 的时候使用 v-model 快捷绑定变量

[Vue warn]: Duplicate keys detected: 'area'. This may cause an update error.

Vue_v-for中key的使用注意事项