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值类型idindexkey
实验一选取xx
实验二x选取x
实验三xx选取

实验一

  • 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

转载于:https://www.cnblogs.com/tim100/p/7262963.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/252195.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

halcon edges_sub_pix算子

转载http://blog.51cto.com/juwen/133003 介绍一下Canny算子&#xff1a; 使用累计直方图计算两个阀值。凡是大于高阀值的一定是边缘&#xff1b; 凡是小于低阀值的一定不是边缘&#xff1b;如果检测结果大于低阀值但又小于高阀值&#xff0c;那就要看这个像素的邻接像素中有…

Python 基础(常用数据结构)

常用数据结构 1&#xff09;元组 元组是一种静态的数据结构&#xff0c;无法修改&#xff0c;若要修改只能重新生成新的元组。 输出结果&#xff1a; 元组元素的获取是通过索引值去获得的&#xff1b;例如上面的tup1[0]返回apple&#xff1b;另外你可以直接把tup1一次性赋给多个…

Java IO(二)——RandomAccessFile

一、RandomAccessFile RandomAccessFile类可以说是Java语言中功能最为丰富的文件访问类&#xff0c;它提供了众多的文件访问方法。RandomAccessFile类支持"随机访问"方式&#xff0c;可以跳转到文件的任意位置处读写数据。要访问一个文件的时候&#xff0c;不想把文件…

halcon select_shape_xld按区域大小描绘xld

常用与对xld进行以面积、长、宽进行XLD的选择操作。 select_shape_xld(XLD : SelectedXLD : Features, Operation, Min, Max : ) XLD&#xff1a;需要选择的xld SelectedXLD:选择后的xld Features:面积、长、高等 Operation&#xff1a;and、or等 Min&#xff1a;最小值门…

工业三防手持终端如何选

物联宇手持终端作为工业级的数据采集器&#xff0c;目前[]()已广泛应用在物流快递、生产制造、零售、医疗、公共事业等领域。由于工业环境的复杂性&#xff0c;手持终端在恶劣的环境下作业&#xff0c;在性能、稳定性、电池耐用性上的要求都较高&#xff0c;同时还必须采用一些…

centos7 安装python3

1.查看是否已经安装Python CentOS 7.2 默认安装了python2.7.5 因为一些命令要用它比如yum 它使用的是python2.7.5。 使用 python -V 命令查看一下是否安装Python 然后使用命令 which python 查看一下Python可执行文件的位置 可见执行文件在/usr/bin/ 目录下&#xff0c;切换到该…

centos svn 的搭建

一. SVN 简介 Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据。 这些数据放置在一个中央资料档案库(repository) 中。 这个档案库很像一个普通的文件服务器, 不过它会记住每一次文件的变动。 这样你就可以把档案恢复到旧的版本, 或是浏…

halcon边缘提取和检测常用方法

转自&#xff1a;http://blog.csdn.net/Bob_qiuxu/article/details/46924969 一、边缘提取 1、设置ROI兴趣区域 2、快速二值化&#xff0c;并连接相邻区域。 这样做的目的是进一步减少目标区域&#xff0c;通过二值化将目标区域大概轮廓提取出来 3、提取最接近目标区域的轮廓…

oracle sqlplus常用命令

转自&#xff1a;https://www.cnblogs.com/wdx8927304/p/7927613.html 一、sys用户和system用户Oracle安装会自动的生成sys用户和system用户(1)、sys用户是超级用户&#xff0c;具有最高权限&#xff0c;具有sysdba角色&#xff0c;有create database的权限&#xff0c;该用户默…

使用css绘制小三角

<div style"width:0;height:0;overflow: hidden;border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid red; "></div>转载于:https://www.cnblogs.com/boonook/p/8570442.h…

C#与halcon联合开发——内存溢出

1.对所以的局部零时变量HObject类的使用前后都加Dispose(); 2.对全局的HObject类变量进行如下定义 HObject liveImage null;HObject ExpGet_liveImage(){return liveImage;}void ExpSet_liveImage(HObject obj){if (liveImage ! null)liveImage.Dispose();liveImage obj.Cop…

点击跳转到QQ聊天界面

<!--//需要添加好友验证--><a href"tencent://message/?uinQQ号码&Site&Menuyes"><img src"需要点击的图片" width"80"/></a><!--不需要添加好友验证--><a href"tencent://message/?Menuyes&am…

学习React的一知半解

① 初探 HMTL的渲染过程 ​ 这个结构化文本就是 HTML 文本&#xff0c; HTML 中的每个元素都对应 DOM中某个节点&#xff0c;这样&#xff0c;因为 HTML 元素的逐级包含关系&#xff0c; DOM 节点自然就构成了一个树形结构&#xff0c;称为 DOM 树 。 ​ 浏览器为了渲染 HTML 格…

DataTable 转为ListT集合

public static List<T> HubbleTableToList<T>(this DataTable dt) where T:Class{List<T> _list new List<T>();if (dt null) return _list;T model;foreach (DataRow dr in dt.Rows)//进行循环dataTable行数据{model Activator.CreateInstance<…

工业相机与镜头分辨率匹配

// 转自 奥普特讲述工业相机与镜头分辨率匹配的技术方案 随着机器视觉行业的发展&#xff0c;为了更好的满足广大客户选配合适镜头的需求&#xff0c;奥普特自动化科技有限公司为您简述工业相机如何选配合适的镜头&#xff0c;以及在相机与镜头的分辨率匹配方面的技术方案。 …

微信分享

<?php /*** Description of WxShare*微信分享* author xinjun*/ namespace Controller\Wx;use Controller\Home\HomeBase; use Model\Wx\UserModel; use Model\Wx\TokenModel; use Framework\Net\Request;class WxShare extends HomeBase {public function __construct(){p…

工业相机的靶面大小

在机器视觉中&#xff0c;工业相机是一种比较重要的配件。而在工业相机中&#xff0c;图像传感器又是最最关键核心的东西。而图像传感器的靶面的大小&#xff0c;往往直接关系到成像的质量。通常来讲&#xff0c;图像的成像质量与像素的大小成正比。这也就意味着&#xff0c;同…

软件建模——第3章 项目前期

3.1 项目前期的主要工作 3.1.1 现状分析 1.硬件分析 2.软件分析 3.1.2 需求收集 3.1.3 粗略设计 1.体系结构设计 2.硬件&#xff08;网络&#xff09;设计 3.应用系统设计 4.安全设计 5.配套设计 3.1.4 可行性分析 3.2 结构化的项目前期实例 3.2.1 组织分析&#xff08;自动化…

echarts_部分图表配置_图表click事件

额。。当然其他事件都是支持的&#xff0c;此文仅以click做简单介绍&#xff1a; 请点击“柱子”。。。 官方介绍&#xff1a;http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA 1 function bottom_z (thisI…

mysql 5.7.25 的安装与 安装错误修改 适用于5.7解压版

1&#xff0c;根据自己的需求去官网下载 2.解压到自己喜欢的路径 其中date 和 my.ini 在5.7后面的版本 解压后是没有的&#xff0c;需要自己配置。 可以自己创建my.ini文件 &#xff0c;但是不能自己创建date文件夹。 其中my.ini文件的配置如下&#xff08;如果报错要将目录文件…