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. C#基础篇七类和静态成员

    1.new关键字做的4个事情 1.1 开辟堆空间 a.开辟多大的空间呢? 当前类 所有的 成员变量类型所占空间的总和 + 类型指针(方法表的地址) b.开辟了空间干什么用呢? 存放 成员变量 1.2 ...

  2. Python学习--23 内建模块及第三方库

    本文将介绍python里常用的模块.如未特殊说明,所有示例均以python3.4为例: $ python -V Python 3.4.3 网络请求 urllib urllib提供了一系列用于操作URL ...

  3. 更改导入项目时weblogic运行库

    1.在项目上点击右键->Properties->Server->选择weblogic的server->点击Apply按钮:2.在项目上点击右键->Properties-& ...

  4. Spring 环境与profile(二)——Properties with Spring

    1. 简述 Spring profile用例,分3个场景(Test, Dev, Prod)相对Spring 环境与profile(一)——超简用例多了根据具体的profile获取对应的Properti ...

  5. Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <-错误解决方案

    做项目的时候因为懒,在写service时直接复制了控制器的依赖注入,之后就出现了这个错误,查了半天. 解决其实很简单,删除掉service中注入的$scope即可.

  6. 百度前端技术学院task34源码——会指令的小块2

    任务描述 增加新的指令如下: TRA LEF:向屏幕的左侧移动一格,方向不变 TRA TOP:向屏幕的上面移动一格,方向不变 TRA RIG:向屏幕的右侧移动一格,方向不变 TRA BOT:向屏幕的下 ...

  7. Java 并发编程常识 —— by 梁飞

    参考 :梁飞 并发编程常识

  8. ASP.NET MVC呼叫WCF Service的方法

    本演示,Insus.NET操练asp.net mvc的应用程序,虽然以前有写过:<MVC应用程序使用Wcf Service>http://www.cnblogs.com/insus/p/3 ...

  9. _ViewStart文件应用

    在这篇<MVC母版页_Layout.cshtml>http://www.cnblogs.com/insus/p/3380419.html中,把一些已经存在的视图或是新产生的视图加入母版中. ...

  10. WCF无法引入Model实体解决方案

    在重新引用服务的时候,或者是是更新引用服务的时候,点“高级”按钮,在服务引用设置对话框中,将“重新使用引用的程序集中的类型”这个勾取消,这样就能安全的重新引用服务.