for根据ID去重_Vue中v-for配合key使用的重要性
在 Vue 官网的风格指南中,有很多对于Vue编码的风格的要求和建议。 在这里,主要解释在编码指南中,为优先级A:必要的 的编码规范的 为 v-for 设置键值
相信在编码初期,很多人都不理解 key 的作用,因为似乎有与没有,似乎都能完成元素的渲染。(当然,用过 Vue CLI,并设置了 ESlint 的朋友,应该会发现 ESLint 强制要求我们在使用 v-for 时,加入 key,否则在编译阶段会报错)
在官网文档中,对 key 做出的诠释是:
如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
由官方文档,则说明了 key 在 v-for 渲染的元素中,主要是作为唯一标识去让 Vue "认为"每个元素都是独一无二的,而不会因为为了减小渲染而复用或修改之前相类似的元素,而导致一些特殊情况的出现。
不使用key的情况
<
测试情况
在上面这个情况中,当我们选中香蕉,再添加一个榴莲时,会发现,之前选中的香蕉,变为选中苹果
这显然不是我们想要的效果,我们预期的效果是添加一个水果后,之前选中的水果不会变化。
使用key的情况
<
测试情况
在上面这个情况中,但我们选中香蕉,再添加一个榴莲时,则没有出现选中的水果错位的情况。这和我们的预期一样。
分析原因
综上所述,使用 key,在 v-for 渲染的元素中,在某些情况下,出现和预期不一样的效果。 这就是因为,在 Vue渲染 的时候,通过只修改元素中的文字,而不重新生成整个元素,来减小渲染强度(只改变元素的2个文字,再添加一个元素,相比于摧毁所有元素,并重新创建所有元素,显然是前者渲染强度小一些。)
关于ESLint的一些观点
在现在大多数的情况下,我们都会使用 Vue CLI 来完成项目,在 Vue CLI 中可以选用 ESLint 来对代码进行一些格式规范、和编码规范。 当然,它有些时候对于编码的格式太过于严苛,而导致很多初期使用的人,会很头疼,这里可以推荐使用 VSCode 配合 Prettier 插件,在保存时,进行自动格式调整。减小在格式调整上花的时间,又同时可以让 ESLint 对编码进行一些检测,比如上面的例子,在 v-for 中,不使用 key,则会不通过检测,并给出相应的提示。
以上便是该篇博文的全部内容,欢迎各位访问我的个人博客。
若有任何错误和建议,还希望指教!!!
VicoHu-个人博客www.vicohu.com
for根据ID去重_Vue中v-for配合key使用的重要性相关推荐
- VS2008中V表结束标记的分析
VS2008中V表结束标记的分析 在逆向C++目标时,我们有时候可能会关注一个V表中到底有多少个虚函数. 这种细节大概多半是与编译器实现相关. 为了弄清楚这个问题,我在VS2008下写了一个简单的测试 ...
- java steam 去重_Java中对List去重, Stream去重
问题 当下互联网技术成熟,越来越多的趋向去中心化.分布式.流计算,使得很多以前在数据库侧做的事情放到了Java端.今天有人问道,如果数据库字段没有索引,那么应该如何根据该字段去重?大家都一致认为用Ja ...
- java steam 去重_Java中对List去重 Stream去重的解决方法
问题 当下互联网技术成熟,越来越多的趋向去中心化.分布式.流计算,使得很多以前在数据库侧做的事情放到了Java端.今天有人问道,如果数据库字段没有索引,那么应该如何根据该字段去重?大家都一致认为用Ja ...
- ID Tech 5 中 Megatexturequot;针对地形的D3D9 基本实现原理
http://blog.csdn.net/BoYueJiang/article/details/8908373 ID Tech 5 中"Megatexture"针对地形的D3D9 ...
- Oracle中V$SESSION等各表的字段解释,Oracle官方解释
https://www.cnblogs.com/grey-wolf/p/10119219.html Oracle中V$SESSION等各表的字段解释,Oracle官方解释 阅读目录 一.常用的视图 1 ...
- ID Tech 5 中Megatexture针对地形的D3D9 基本实现原理
ID Tech 5 中"Megatexture"针对地形的D3D9 基本实现原理 ID Tech 5 中"Megatexture"针对地形的D3D9 基本实现原 ...
- ID Tech 5 中quot;Megatexturequot;针对地形的D3D9 基本实现原理
ID Tech 5 中"Megatexture"针对地形的D3D9 基本实现原理 姚勇 H3D 2007-8 本文对ID SOFTWARE 使用的"megatexture ...
- flink去重(二)解决flink、flink-sql去重过程中的热点问题
解决flink.flink-sql去重过程中的热点问题 1.flink-sql解决热点问题 使用Sql去实现一个去重功能,通常会这样实现 SELECT day, COUNT(DISTINCT user ...
- python 去重 字典_python按照list中字典的某key去重的示例代码
一.需求说明 当我们写爬虫的时候,经常会遇到json格式的数据,它通常是如下结构: data = [{'name':'小K','score':100}, {'name':'小J','score':98 ...
最新文章
- 使用 OpenMVG+PMVS实现视觉三维重建
- python交互界面的退出
- BZOJ2498 : Xavier is Learning to Count
- ajax提交form表单数据_[基础编程学习] [PHP7数组详解]:第2章 (1)从表单提交数据说起...
- 能源项目xml文件 -- springMVC-servlet.xml
- 从网恋到失恋只需要一秒...
- Java命令行界面(第2部分):args4j
- python作业表达式求值_用Python3实现表达式求值
- C/C++——cmd下丢失mspdb100.DLL解决方法
- HTML5 结构语义元素的标题h1~h6元素
- 因为一个字符校对问题,我的大厂面试挂了
- 第四步_安装gcc交叉编译工具
- 顺序表的基本操作实现
- 深度学习-1.3卷积神经网络
- 四级英语词汇加词组(超全)
- 项目反应理论 matlab,IRTPRO | 项目反应理论软件
- 文化IP能量有多大,舞台就有多大
- 转至老熊三分地--inside sqlplus prelim
- 巴菲特:推荐给投资者的9本书(附下载链接)
- x86_64汇编之二:x86_64的基本架构(寄存器、寻址模式、指令集概览)