相思资源网 Design By www.200059.com

数组的v-for

item in items

item of items

item,index in items

(item,index) in items

对象的v-for(键值,键名,索引)

value in object

(value, key) in object

(value, key, index) in object

v-for渲染的列表的结构采用“就地复用”的策略,也就说当数据重新排列数据时,会复用已在页面渲染好的元素,不会移动 DOM 元素来匹配数据项的顺序,这种模式是高效的,改变现有位置的结构的数据即可

eg:

问题:点击翻转数组哦,高亮并没有跟随1 在最后,而是直接复用在4上

基于vue--key值的特殊用处详解

原因:点击翻转数组哦,高亮并没有跟随1 在最后,而是直接复用在4上

解决:需要提供一个唯一的key值(常用ID),以便它能跟踪每个节点的身份,从而重用和重新排序现有元素

基于vue--key值的特殊用处详解

补充知识:vue---绑定key值与不绑定key的作用及其优点

vue—key值绑定的作用及优点

**

本文基于vue2x版本进行解析

绑定key值:可以更快速和更精确的确定变化数据的位置,并进行响应式操作,在一定量的数据之上时,是高性能的,更多的情况下与v-for一起使用;

不绑定key值:vue默认机制状态下的,当小于一定数据量时,并且DOM数据简单处理时,在刻意使用的情况下,vue的默认机制是更加高性能的,仅限于数据量较小,数据类型简单且后续不会有过多更新时使用。

总的来说,绑定key值与v-for绑定使用效果更好,不绑定key,在简单场景下使用性能更高,各有优缺点,可根据使用场景,按需使用。

代码分析见下文(如有错误请不吝指出,如正确必采纳改正)

1.在不绑定key的时候:

vue中的默认机制是不绑定key,

<div class="father" v-for=" item in data">
  <div>1</div> //node:a  默认状态下的不绑定key的虚拟节点
  <div>2</div> //node:b
  <div>3</div> //node:c
  <div>4</div> //node:d
</div>

此状态下的key值发生变化,更新的机制则是{就地更新},但相应的虚拟节点不会发生变化`如下所示:这种是vue的默认机制,就地更新,适用于简单的DOM数据渲染,在一定的数据量下,是比key值绑定更加高性能的;

<div class="father" v-for=" item in data">
  <div>2</div> //node:a  数据变化后,默认机制的标识没有变化,
  <div>3</div> //node:b
  <div>4</div> //node:c
  <div>1</div> //node:d
</div>

2:在绑定key值的时候:

此时,所有的虚拟节点均被绑定唯一的标识,类似于身份证的作用;

<div class="father" v-for=" item in data" :key="item.id">
  <div>1</div> //key:a  key值为唯一标识,
  <div>2</div> //key:b
  <div>3</div> //key:c
  <div>4</div> //key:d 
</div>

如果其中的数据发生变化,diff算法会映射到变化的虚拟节点,更加快速和精准的找到变化的节点,并对其进行newkey和oldkey的值判断,进行相应的更新操作:如下

<div class="father" v-for=" item in data" :key="item.id">
  <div>4</div> //key:d //数值变化 key值作为唯一标识,跟随
  <div>2</div> //key:b
  <div>3</div> //key:c
  <div>1</div> //key:a //数值变化 key值作为唯一标识,跟随
</div>

key的唯一标识是跟随数据变化的,并且唯一对应,

以上这篇基于vue--key值的特殊用处详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
vue,key值

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“基于vue--key值的特殊用处详解”

暂无基于vue--key值的特殊用处详解的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?