基于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 相关文章推荐
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
jquery json 实例代码
Dec 02 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
JavaScript中对象介绍
Dec 31 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
php生成无限栏目树
2017/03/16 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
js 走马灯简单实例
2013/11/21 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python中的rjust()方法使用详解
2015/05/19 Python
python动态加载包的方法小结
2016/04/18 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
python的help函数如何使用
2020/06/11 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
劳动实践课感言
2014/02/01 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
园林技术专业求职信
2014/07/28 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技