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 ...
随机推荐
- C#基础篇七类和静态成员
1.new关键字做的4个事情 1.1 开辟堆空间 a.开辟多大的空间呢? 当前类 所有的 成员变量类型所占空间的总和 + 类型指针(方法表的地址) b.开辟了空间干什么用呢? 存放 成员变量 1.2 ...
- Python学习--23 内建模块及第三方库
本文将介绍python里常用的模块.如未特殊说明,所有示例均以python3.4为例: $ python -V Python 3.4.3 网络请求 urllib urllib提供了一系列用于操作URL ...
- 更改导入项目时weblogic运行库
1.在项目上点击右键->Properties->Server->选择weblogic的server->点击Apply按钮:2.在项目上点击右键->Properties-& ...
- Spring 环境与profile(二)——Properties with Spring
1. 简述 Spring profile用例,分3个场景(Test, Dev, Prod)相对Spring 环境与profile(一)——超简用例多了根据具体的profile获取对应的Properti ...
- Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <-错误解决方案
做项目的时候因为懒,在写service时直接复制了控制器的依赖注入,之后就出现了这个错误,查了半天. 解决其实很简单,删除掉service中注入的$scope即可.
- 百度前端技术学院task34源码——会指令的小块2
任务描述 增加新的指令如下: TRA LEF:向屏幕的左侧移动一格,方向不变 TRA TOP:向屏幕的上面移动一格,方向不变 TRA RIG:向屏幕的右侧移动一格,方向不变 TRA BOT:向屏幕的下 ...
- Java 并发编程常识 —— by 梁飞
参考 :梁飞 并发编程常识
- ASP.NET MVC呼叫WCF Service的方法
本演示,Insus.NET操练asp.net mvc的应用程序,虽然以前有写过:<MVC应用程序使用Wcf Service>http://www.cnblogs.com/insus/p/3 ...
- _ViewStart文件应用
在这篇<MVC母版页_Layout.cshtml>http://www.cnblogs.com/insus/p/3380419.html中,把一些已经存在的视图或是新产生的视图加入母版中. ...
- WCF无法引入Model实体解决方案
在重新引用服务的时候,或者是是更新引用服务的时候,点“高级”按钮,在服务引用设置对话框中,将“重新使用引用的程序集中的类型”这个勾取消,这样就能安全的重新引用服务.