DDR爱好者之家

基于vue--key值的特殊用处详解
站长资源 2024/11/24 佚名
65 1538
DDR爱好者之家 Design By 杰米

数组的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值的特殊用处详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米