有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue 中使用 v-for 为何要绑定 key?

vue cat 3个月前 (07-06) 118次浏览 已收录 0个评论 扫描二维码

一、总结:

快速查找到节点,减少渲染次数,提升渲染性能,高效的更新虚拟DOM。

二、分析理解:

1、绑定 index

之前的数据                        之后的数据

key: 0  index: 0 name: test1     key: 0  index: 0 name: test1
key: 1  index: 1 name: test2     key: 1  index: 1 name: 插入的数据  // 更新
key: 2  index: 2 name: test3     key: 2  index: 2 name: test2 // 更新
                                 key: 3  index: 3 name: test3 // 更新

// 如果在最后面插入一条数据,那倒没影响,前面的正常复用,只更新插入到最后的那条数据。
// 但是,如果在中间插入一条数据,如上
// 明明只是插入了一条数据,却要重新渲染三条数据。

2、绑定元素 id

之前的数据                             之后的数据

key:1  id: 1  index:0  name: test1    key:1  id: 1  index:0  name: test1
key:2  id: 2  index:1  name: test2    key:4  id: 4  index:1  name: 插队数据 //更新
key:3  id: 3  index:2  name: test3    key:2  id: 2  index:2  name: test2
                                      key:3  id: 3  index:3  name: test3

// 现在对比发现只有一条数据变化了,
// 只要重新渲染 id为4 的那条数据数据就可以了,其他都是就复用之前的。

总结,最好绑定元素的 id。

另外Vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则Vue只会替换其内部属性而不会触发过渡效果。

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址