首页 >> js开发 >> js基于vue--key值的特殊用处详解js大全
js基于vue--key值的特殊用处详解js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
数组的v-for数组的v-for
item in items
item of items
item,index in items
(item,index) in items
item in itemsitem of itemsitem,index in items(item,index) in items对象的v-for(键值,键名,索引)对象的v-for(键值,键名,索引)
value in object
(value, key) in object
(value, key, index) in object
value in object(value, key) in object(value, key, index) in objectv-for渲染的列表的结构采用“就地复用”的策略,也就说当数据重新排列数据时,会复用已在页面渲染好的元素,不会移动 DOM 元素来匹配数据项的顺序,这种模式是高效的,改变现有位置的结构的数据即可eg:问题:点击翻转数组哦,高亮并没有跟随1 在最后,而是直接复用在4上问题:原因:点击翻转数组哦,高亮并没有跟随1 在最后,而是直接复用在4上原因:解决:需要提供一个唯一的key值(常用ID),以便它能跟踪每个节点的身份,从而重用和重新排序现有元素解决:解决:补充知识:vue---绑定key值与不绑定key的作用及其优点补充知识:补充知识:vue---绑定key值与不绑定key的作用及其优点vue—key值绑定的作用及优点vue—key值绑定的作用及优点**本文基于vue2x版本进行解析:本文基于vue2x版本进行解析绑定key值:可以更快速和更精确的确定变化数据的位置,并进行响应式操作,在一定量的数据之上时,是高性能的,的情况下与v-for一起使用;不绑定key值:vue默认机制状态下的,当小于一定数据量时,并且DOM数据简单处理时,在刻意使用的情况下,vue的默认机制是更加高性能的,仅限于数据量较小,数据类型简单且后续不会有过多更新时使用。总的来说,绑定key值与v-for绑定使用效果更好,不绑定key,在简单场景下使用性能更高,各有优缺点,可根据使用场景,按需使用。代码分析见下文(如有错误请不吝指出,如正确必采纳改正)1.在不绑定key的时候:1.在不绑定key的时候:vue中的默认机制是不绑定key,
默认状态下的不绑定key的虚拟节点
默认状态下的不绑定key的虚拟节点
此状态下的key值发生变化,更新的机制则是{就地更新},但相应的虚拟节点不会发生变化`如下所示:这种是vue的默认机制,就地更新,适用于简单的DOM数据渲染,在一定的数据量下,是比key值绑定更加高性能的;
数据变化后,默认机制的标识没有变化,
数据变化后,默认机制的标识没有变化,
2:在绑定key值的时候:2:在绑定key值的时候:此时,所有的虚拟节点均被绑定唯一的标识,类似于身份证的作用;
key值为唯一标识,
key值为唯一标识,
如果其中的数据发生变化,diff算法会映射到变化的虚拟节点,更加快速和精准的找到变化的节点,并对其进行newkey和oldkey的值判断,进行相应的更新操作:如下
key的唯一标识是跟随数据变化的,并且唯一对应,以上这篇基于vue--key值的特殊用处详解就是小编分享给大家的全部内容了,希望能给大家一个参考。
item in items
item of items
item,index in items
(item,index) in items
item in itemsitem of itemsitem,index in items(item,index) in items对象的v-for(键值,键名,索引)对象的v-for(键值,键名,索引)
value in object
(value, key) in object
(value, key, index) in object
value in object(value, key) in object(value, key, index) in objectv-for渲染的列表的结构采用“就地复用”的策略,也就说当数据重新排列数据时,会复用已在页面渲染好的元素,不会移动 DOM 元素来匹配数据项的顺序,这种模式是高效的,改变现有位置的结构的数据即可eg:问题:点击翻转数组哦,高亮并没有跟随1 在最后,而是直接复用在4上问题:原因:点击翻转数组哦,高亮并没有跟随1 在最后,而是直接复用在4上原因:解决:需要提供一个唯一的key值(常用ID),以便它能跟踪每个节点的身份,从而重用和重新排序现有元素解决:解决:补充知识:vue---绑定key值与不绑定key的作用及其优点补充知识:补充知识:vue---绑定key值与不绑定key的作用及其优点vue—key值绑定的作用及优点vue—key值绑定的作用及优点**本文基于vue2x版本进行解析:本文基于vue2x版本进行解析绑定key值:可以更快速和更精确的确定变化数据的位置,并进行响应式操作,在一定量的数据之上时,是高性能的,的情况下与v-for一起使用;不绑定key值:vue默认机制状态下的,当小于一定数据量时,并且DOM数据简单处理时,在刻意使用的情况下,vue的默认机制是更加高性能的,仅限于数据量较小,数据类型简单且后续不会有过多更新时使用。总的来说,绑定key值与v-for绑定使用效果更好,不绑定key,在简单场景下使用性能更高,各有优缺点,可根据使用场景,按需使用。代码分析见下文(如有错误请不吝指出,如正确必采纳改正)1.在不绑定key的时候:1.在不绑定key的时候:vue中的默认机制是不绑定key,
1
//node:a默认状态下的不绑定key的虚拟节点
2
//node:b3
//node:c4
//node:d1
//node:a默认状态下的不绑定key的虚拟节点
2
//node:b3
//node:c4
//node:d2
//node:a数据变化后,默认机制的标识没有变化,
3
//node:b4
//node:c1
//node:d2
//node:a数据变化后,默认机制的标识没有变化,
3
//node:b4
//node:c1
//node:d1
//key:akey值为唯一标识,
2
//key:b3
//key:c4
//key:d 1
//key:akey值为唯一标识,
2
//key:b3
//key:c4
//key:d 4
//key:d //数值变化 key值作为唯一标识,跟随2
//key:b3
//key:c1
//key:a //数值变化 key值作为唯一标识,跟随4
//key:d //数值变化 key值作为唯一标识,跟随2
//key:b3
//key:c1
//key:a //数值变化 key值作为唯一标识,跟随相关文章:
- jsvue相同路由跳转强制刷新该路由组件操作js大全
- jsvue 限制input只能输入正数的操作js大全
- js代码javascript读取本地文件和目录方法详解
- js解决vue项目input输入框双向绑定数据不实时生效问题js大全
- js微信小程序实现上传照片代码实例解析js大全
- jsJS事件循环机制event loop宏任务微任务原理解析js大全
- jsvue cli3.0打包上线静态资源找不到路径的解决操作js大全
- jsvue 解决addRoutes多次添加路由重复的操作js大全
- jsvue 实现根据data中的属性值来设置不同的样式js大全
- jsantd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作js大全