vue 用key拿对象value_基于vue--key值的特殊用处详解

数组的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上

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

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

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

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

本文基于vue2x版本进行解析：

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

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

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

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

1.在不绑定key的时候：

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

//node：a 默认状态下的不绑定key的虚拟节点

//node：b

//node：c

//node：d

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

//node：a 数据变化后，默认机制的标识没有变化，

//node：b

//node：c

//node：d

2：在绑定key值的时候：

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

//key:a key值为唯一标识，

//key:b

//key:c

//key:d

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

//key:d //数值变化 key值作为唯一标识，跟随

//key:b

//key:c

//key:a //数值变化 key值作为唯一标识，跟随

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

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

vue 用key拿对象value_基于vue--key值的特殊用处详解相关推荐

vue 事件调用传参_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
click传值vue_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
mysql 点赞数据库设计_基于redis实现的点赞功能设计思路详解
点赞其实是一个很有意思的功能.基本的设计思路有大致两种, 一种自然是用mysql等数据库直接落地存储, 另外一种就是利用点赞的业务特征来扔到redis(或memcache)中, 然后离线刷回mysq ...
基于Kubernetes构建Docker集群管理详解
from: 基于Kubernetes构建Docker集群管理详解 Kubernetes是Google开源的容器集群管理系统,基于Docker构建一个容器的调度服务,提供资源调度.均衡容灾.服务注册.动 ...
操作系统：基于页面置换算法的缓存原理详解（下）
概述: 在上一篇<操作系统:基于页面置换算法的缓存原理详解(上)>中,我们主要阐述了FIFO.LRU和Clock页面置换算法.接着上一篇说到的,本文也有三个核心算法要讲解.分别是LFU(L ...
php7自定义异常处理,基于PHP7错误处理与异常处理方法(详解)
PHP7错误处理 PHP 7 改变了大多数错误的报告方式.不同于传统(PHP 5)的错误报告机制,现在大多数错误被作为 Error 异常抛出. 这种 Error 异常可以像 Exception 异常一 ...
单片机控制两个步进电机画圆_基于单片机的步进电机转速控制设计详解（附程序）...
步进电机是将电脉冲信号转变为角位移或线位移的开环控制元件.在非超载的情况下,电机的转速.停止的位置只取决于脉冲信号的频率和脉冲数,而不受负载变化的影响,即给电机加一个脉冲信号,电机则转过一个步距角.这 ...
R语言基于forestplot包可视化森林图实战详解：美化的森林图：自定义字体设置、置信区间、坐标轴（刻度、标签、范围）、无效线去除、水平线、辅助线、box形状、色彩等
R语言基于forestplot包可视化森林图实战详解:美化的森林图:自定义字体设置.置信区间.坐标轴(刻度.标签.范围).无效线去除.水平线.辅助线.box形状.色彩等目录
基于MIG控制器的DDR3读写控制详解
基于MIG控制器的DDR3读写控制详解目的:详细介绍FPGA中基于MIG IP核控制的DDR3详细控制及内部逻辑平台:AX7350-Xilinx 软件:Vivado 2017.4 1.MIG IP ...

vue 用key拿对象value_基于vue--key值的特殊用处详解

vue 用key拿对象value_基于vue--key值的特殊用处详解相关推荐

最新文章

热门文章