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


Posted in Javascript onJuly 31, 2020

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

Javascript 相关文章推荐
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
9个JavaScript日常开发小技巧
Oct 06 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 #Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 #Javascript
vscode中Vue别名路径提示的实现
Jul 31 #Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 #Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 #Javascript
JS可断点续传文件上传实现代码解析
Jul 30 #Javascript
Vue单文件组件开发实现过程详解
Jul 30 #Javascript
You might like
PHP中鲜为人知的10个函数
2014/02/28 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
公司JAVA开发面试题
2015/04/02 面试题
会计工作决心书
2014/03/11 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
学习型班组申报材料
2014/05/31 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
军训通讯稿范文
2015/07/18 职场文书
学校运动会开幕词
2016/03/03 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
win10下go mod配置方式
2021/04/25 Golang
vue2实现provide inject传递响应式
2021/05/21 Vue.js
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL