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

  1. 改变第一个元素的id值,第一个li元素重新渲染,其余三个li元素与对照组速度始终保持一致,没有变化,说明li元素单独渲染
  2. 为了验证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

  1. 改变第一个元素的id值,第一个li元素与其余三个li元素与对照组速度始终保持一致,没有变化,说明绑定index值并未对li渲染造成影响
  2. 为了验证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

  1. 改变第一个元素的id值,第一个li元素与其余三个li元素与对照组速度始终保持一致,没有变化,说明绑定key值并未对li渲染造成影响
  2. 为了验证1.观点,我们对实验组按照升序进行排列,查看DOM结构,当改变第一个元素位置时,第一个li元素重新渲染,其余三个li元素也重新渲染均且与对照组速度始终保持一致,说明所有li元素均重新渲染,验证1.结论

实验结论

经过三次对照实验(我们的实验采用了控制变量法,对照实验法进行),我们可以得出结论:使用v-for渲染元素时,使用元素自身的id属性去指定渲染元素的key值有利于单个元素的重新渲染,若采用其他如v-for提供的index, key等值,在改变渲染出来的DOM结构时,会触发所有元素的重新渲染,当数据过大时,可能会造成性能负担。

总结

当我们在使用v-for进行渲染时,尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值,这样在当前渲染元素的DOM结构发生变化时,能够单独响应该元素而不触发所有元素的渲染。

研究成员

TimRChen

libook

Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究的更多相关文章

  1. Vue.2.0.5-深入响应式原理

    大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...

  2. 读Vue源码二 (响应式对象)

    vue在init的时候会执行observer方法,如果value是对象就直接返回,如果对象上没有定义过_ob_这个属性,就 new Observer实例 export function observe ...

  3. 【Vue高级知识】细谈Vue 中三要素(响应式+模板+render函数)

    [Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809

  4. 【Vue源码学习】响应式原理探秘

    最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...

  5. Vue.js学习 Item12 – 内部响应式原理探究

    深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...

  6. 深入浅出Vue基于“依赖收集”的响应式原理(转)

    add by zhj: 文章写的很通俗易懂,明白了Object.defineProperty的用法 原文:https://zhuanlan.zhihu.com/p/29318017 每当问到VueJS ...

  7. vue新增属性是否会响应式更新?

    原文地址 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官 ...

  8. vue2.0 之 深入响应式原理

    实例demo<div id="app"> <span>{{a}}</span> <input type="text" ...

  9. vue源码解析之响应式原理

    关于defineReactive等使用细节需要自行了解 一些关键知识点 $mount时 会 new Watcher 把组件的 updateComponent 方法传给watcher 作为getter ...

随机推荐

  1. java8之lambda表达式(2)-方法引用

    方法引用使用的地方也是在函数式接口,使用方法引用可以使代码更加简单和便捷 在如下代码中 根据List中字符串长度排序的代码可以写成如下: public static void test1_() { L ...

  2. 修改gitlab仓库地址

    最近使用GitLab 搭建了Git的私有仓库,但是发现私有仓库的地址是一串序列号,搞了半天克隆时都是提醒仓库无效,后来才觉得不对,不是本机的IP地址如图 对此我们需要修改gitlab.yml文件: 1 ...

  3. ubuntu 下配置elasticSearch

    配置JAVA环境 配置jdk 上官网下载x64的和ubuntu匹配的jdk 找到usr/java ,解压下载的文件  tar –xzvf  文件.tar.gz Vim /etc/source  添加配 ...

  4. es-09-spark集成

    es和spark的集成比较简单, 直接使用内部封装的一些方法即可 版本设置说明: https://www.elastic.co/guide/en/elasticsearch/hadoop/curren ...

  5. kafka-java客户端连接

    使用java客户端, kafkaproducer, kafkaconsumer进行kafka的连接 注: 0.10 版本之后, 连接kafka只需要brokerip即可, 不需要zookeeper的信 ...

  6. tips: a=a+b 与 a+=b

    前言: 我们在编码的时候, 经常会使用到 a 加上一个数或者加上一个字符串, 然后再赋值回给 a . 那么 a=a+b 和 a+=b是相同的么? 情景1: a, b 类型相同, 且都为值类型 @Tes ...

  7. Spring 注解方式引入配置文件

    配置文件,我以两种为例,一种是引入Spring的XML文件,另外一种是.properties的键值对文件: 一.引入Spring XML的注解是@ImportResource @Retention(R ...

  8. Spring事务传播属性介绍(一).required 和 reuqires_new

    Mandatory.Never.Not_Support传播属性分析传送门:https://www.cnblogs.com/lvbinbin2yujie/p/10260030.html Nested传播 ...

  9. 使用iframe实现同域跨站提交数据

    有一个已经编译的asp.net 1.1的网站.为了改进录入的效率,改为由barcode扫描枪来替代手动.由于在扫描枪添加其它信息.原录入窗口已经无法适应.另外程序虽然跑的是存储过程,但交易的trans ...

  10. NPOI 之导入导出

    转自https://www.cnblogs.com/zuowj/archive/2015/05/04/4475663.html转别人的,做了一点点改动 using NPOI.HSSF.UserMode ...