基于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 获得绝对,相对位置的坐标方法
Feb 09 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
详解vuex的简单使用
Mar 12 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
javascript与有限状态机详解
2014/05/08 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
python实现ping的方法
2015/07/06 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
Python 解析简单的XML数据
2020/07/24 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
大学生专科毕业生自我评价
2013/11/17 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
教师评语大全
2014/04/28 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
党委班子对照检查材料
2014/08/19 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL