Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
在github上阅览README.md以获得最佳阅读体验,点这里
v-for响应式key, index及item.id参数对v-bind:key值造成差异研究
实验背景
通常情况下,我们渲染一个li列表,采用v-for指令进行渲染,我们需要给渲染的每一项元素绑定一个key值,其实绑定该key值是可选的,但会引起警告。使用v-for参数的过程中,由于v-for提供三个参数,分别是: value, key, index。对其哪一个作为元素绑定key值更能得到我们想要的响应式渲染作出实验。
实验目的
总结出在采用不同参数作为元素绑定key值时,出现的不同的渲染结果,得出最优渲染方案
实验准备
我们准备第三个可以作为绑定key值的变量,分别是:
- 渲染item自带属性id
- v-for提供的key
- v-for提供的index
我们制定一个参照表格
li绑定key值类型 |
id | index | key |
---|---|---|---|
实验一 | 选取 | x | x |
实验二 | x | 选取 | x |
实验三 | x | x | 选取 |
实验一
- li绑定key值为自带属性id
- 分别控制两个变量:改变id值,对li进行排序
实验vue.js代码
// items data
items: [
{
id: 2,
},
{
id: 1,
},
{
id: 3,
},
{
id: 4,
},
]
<!-- dom constructor -->
<template>
<div class="content">
<ul>
<li class="animate">对照组</li>
<li v-for="(item, key, index) in items" class="animate" v-bind:key="item.id">{{item.id}}</li>
<!-- 当前绑定值为item.id -->
</ul>
</div>
</div>
</template>
首先使用了item.id作为绑定的key值,我们来看下效果:
渲染效果demo
- 改变第一个元素的id值,第一个li元素重新渲染,其余三个li元素与对照组速度始终保持一致,没有变化,说明li元素单独渲染
- 为了验证1.观点,我们对实验组按照升序进行排列,查看DOM结构,当改变第一个元素位置时,第一个li元素重新渲染,其余三个li元素不重新渲染且与对照组速度始终保持一致,说明第一个li元素单独渲染,验证1.结论
实验二
- li绑定key值为 v-for提供的index参数
- 分别控制两个变量:改变id值,对li进行排序
实验vue.js代码
// items data
items: [
{
id: 2,
},
{
id: 1,
},
{
id: 3,
},
{
id: 4,
},
]
<!-- dom constructor -->
<template>
<div class="content">
<ul>
<li class="animate">对照组</li>
<li v-for="(item, key, index) in items" class="animate" v-bind:key="index">{{item.id}}</li>
<!-- 当前绑定值为index -->
</ul>
</div>
</div>
</template>
在实验二中,使用v-for提供的index参数作为绑定的key值,我们来看下效果:
渲染效果demo
- 改变第一个元素的id值,第一个li元素与其余三个li元素与对照组速度始终保持一致,没有变化,说明绑定index值并未对li渲染造成影响
- 为了验证1.观点,我们对实验组按照升序进行排列,查看DOM结构,当改变第一个元素位置时,第一个li元素重新渲染,其余三个li元素也重新渲染均且与对照组速度始终保持一致,说明所有li元素均重新渲染,验证1.结论
实验三
- li绑定key值为 v-for提供的key参数
- 分别控制两个变量:改变id值,对li进行排序
实验vue.js代码
// items data
items: [
{
id: 2,
},
{
id: 1,
},
{
id: 3,
},
{
id: 4,
},
]
<!-- dom constructor -->
<template>
<div class="content">
<ul>
<li class="animate">对照组</li>
<li v-for="(item, key, index) in items" class="animate" v-bind:key="key">{{item.id}}</li>
<!-- 当前绑定值为key -->
</ul>
</div>
</div>
</template>
在实验二中,使用v-for提供的key参数作为绑定的key值,我们来看下效果:
渲染效果demo
- 改变第一个元素的id值,第一个li元素与其余三个li元素与对照组速度始终保持一致,没有变化,说明绑定key值并未对li渲染造成影响
- 为了验证1.观点,我们对实验组按照升序进行排列,查看DOM结构,当改变第一个元素位置时,第一个li元素重新渲染,其余三个li元素也重新渲染均且与对照组速度始终保持一致,说明所有li元素均重新渲染,验证1.结论
实验结论
经过三次对照实验(我们的实验采用了控制变量法,对照实验法进行),我们可以得出结论:使用v-for渲染元素时,使用元素自身的id属性去指定渲染元素的key值有利于单个元素的重新渲染,若采用其他如v-for提供的index, key等值,在改变渲染出来的DOM结构时,会触发所有元素的重新渲染,当数据过大时,可能会造成性能负担。
总结
当我们在使用v-for进行渲染时,尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值,这样在当前渲染元素的DOM结构发生变化时,能够单独响应该元素而不触发所有元素的渲染。
研究成员
Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究的更多相关文章
- Vue.2.0.5-深入响应式原理
大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...
- 读Vue源码二 (响应式对象)
vue在init的时候会执行observer方法,如果value是对象就直接返回,如果对象上没有定义过_ob_这个属性,就 new Observer实例 export function observe ...
- 【Vue高级知识】细谈Vue 中三要素(响应式+模板+render函数)
[Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809
- 【Vue源码学习】响应式原理探秘
最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...
- Vue.js学习 Item12 – 内部响应式原理探究
深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...
- 深入浅出Vue基于“依赖收集”的响应式原理(转)
add by zhj: 文章写的很通俗易懂,明白了Object.defineProperty的用法 原文:https://zhuanlan.zhihu.com/p/29318017 每当问到VueJS ...
- vue新增属性是否会响应式更新?
原文地址 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官 ...
- vue2.0 之 深入响应式原理
实例demo<div id="app"> <span>{{a}}</span> <input type="text" ...
- vue源码解析之响应式原理
关于defineReactive等使用细节需要自行了解 一些关键知识点 $mount时 会 new Watcher 把组件的 updateComponent 方法传给watcher 作为getter ...
随机推荐
- java8之lambda表达式(2)-方法引用
方法引用使用的地方也是在函数式接口,使用方法引用可以使代码更加简单和便捷 在如下代码中 根据List中字符串长度排序的代码可以写成如下: public static void test1_() { L ...
- 修改gitlab仓库地址
最近使用GitLab 搭建了Git的私有仓库,但是发现私有仓库的地址是一串序列号,搞了半天克隆时都是提醒仓库无效,后来才觉得不对,不是本机的IP地址如图 对此我们需要修改gitlab.yml文件: 1 ...
- ubuntu 下配置elasticSearch
配置JAVA环境 配置jdk 上官网下载x64的和ubuntu匹配的jdk 找到usr/java ,解压下载的文件 tar –xzvf 文件.tar.gz Vim /etc/source 添加配 ...
- es-09-spark集成
es和spark的集成比较简单, 直接使用内部封装的一些方法即可 版本设置说明: https://www.elastic.co/guide/en/elasticsearch/hadoop/curren ...
- kafka-java客户端连接
使用java客户端, kafkaproducer, kafkaconsumer进行kafka的连接 注: 0.10 版本之后, 连接kafka只需要brokerip即可, 不需要zookeeper的信 ...
- tips: a=a+b 与 a+=b
前言: 我们在编码的时候, 经常会使用到 a 加上一个数或者加上一个字符串, 然后再赋值回给 a . 那么 a=a+b 和 a+=b是相同的么? 情景1: a, b 类型相同, 且都为值类型 @Tes ...
- Spring 注解方式引入配置文件
配置文件,我以两种为例,一种是引入Spring的XML文件,另外一种是.properties的键值对文件: 一.引入Spring XML的注解是@ImportResource @Retention(R ...
- Spring事务传播属性介绍(一).required 和 reuqires_new
Mandatory.Never.Not_Support传播属性分析传送门:https://www.cnblogs.com/lvbinbin2yujie/p/10260030.html Nested传播 ...
- 使用iframe实现同域跨站提交数据
有一个已经编译的asp.net 1.1的网站.为了改进录入的效率,改为由barcode扫描枪来替代手动.由于在扫描枪添加其它信息.原录入窗口已经无法适应.另外程序虽然跑的是存储过程,但交易的trans ...
- NPOI 之导入导出
转自https://www.cnblogs.com/zuowj/archive/2015/05/04/4475663.html转别人的,做了一点点改动 using NPOI.HSSF.UserMode ...