v-for中key的使用

我们都知道,vue很大的一个特点就是双向数据绑定,数据一旦改变,那么页面就会渲染新的数据呈现在页面上
对于v-for渲染的列表数据来说,数据量可能一般很庞大,而且我们经常还要对这个数据进行一些增删改操作
假设我们给列表增加一条数据,整个列表都要重新渲染一遍,那不就很费事吗,而key的出现就是尽可能的回避了这个问题,提高效率,如果我们给列表增加一条数据,页面只渲染了这个数据,那不就很完美了
v-for默认使用就地复用策略,列表数据修改的时候,他会根据可以值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素

当我们这样绑定时，我们在对最后面的数据进行操作时不会有什么问题，一旦我们对中间进行操作就会产生不好的作用

可以看到除了第一个数据可以复用之前的之外，后面的所有数据都需要重新渲染。
最好的办法是使用数组中不会变化的那一项作为 key 值，对应到项目中，即每条数据都有一个唯一的 id ，来标识这条数据的唯一性。

item如果唯一可以使用item

总结:
key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 Vue 优化渲染。这些 key 必须是唯一的数字或字符串，Vue 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

方便查找删除虚拟DOM 节点

v-for中key的使用相关推荐

python 下划线转驼峰_json字符串中key值下划线命名转换为驼峰命名
json字符串中key值下划线命名转换为驼峰命名: 例如: 原json串: String json= "{'user_name':'ok','user_sex':0,'object_info ...
json字符串中key值下划线命名转换为驼峰命名
json字符串中key值下划线命名转换为驼峰命名: 例如: public class JsonUtils {public final static void convert(Object json) ...
5渲染判断_Vue页面渲染中key的应用实例教程
引言在前端项目开发过程中,el-table展示的结果列使用组件形式引入,其中某些字段通过:formatter方法转码,结果栏位的字段显示/隐藏控制也使用组件形式引入,前端在控制字段显示属性时,发现码 ...
oracle v rman status,RMAN 中V$ARCHIVED_LOG 中STATUS 为X 的文件处理
记录一下[@more@] 今天发现RMAN 中V$ARCHIVED_LOG 中STATUS 为"X" 的文件,想起是因为手动删掉错几个日志造成的,通过如下的方法把RMAN 中的记录 ...
中国天气预报接口：SmartWeather API中key的计算方法
最近申请到SmartWeatherAPI天气预报接口的使用权限,开始着手我的实时天气预报系统的开发,主要开发的版本使用的是Python脚本,成果将于近期以系列文章与大家见面.今天在这里我和大家探讨一下 ...
JAVA 通过value获取Map中key的三种方法
JAVA 通过value获取Map中key的三种方法简介方法描述循环法 Stream方法 Apache Commons Collections的BidiMap 总结简介我们都知道Map是存放 ...
key mysql_mysql中key 、primary key 、unique key 与index区别
mysql中索引是非常重要的知识点,相比其他的知识点,索引更难掌握,并且mysql中的索引种类也有很多,比如primary key .unique key 与index等等,本文章向大家介绍mysql ...
关于v$process与v$session中process的理解
v$session有个process字段,V$PROCESS有个SPID字段,这两个字段是不是一个意思呢?是不是都代表会话的操作系统进程呢? 官方文档上的解释: SPID VARCHAR2( ...
oracle设置缓存大小设置多少,【数据库类※从V$DB_CACHE_ADVICE中设置数据缓冲大小※】...
[数据库类※从V$DB_CACHE_ADVICE中设置数据缓冲大小※] Oracle 9i引入了一个新的途径来预测数据缓冲cache中附加数据缓存的所带来的好处的多少.V$DB_CACHE_A ...
Hadoop的mapper输出中key和value之间的分隔符
Hadoop的mapper输出中key和value之间的分隔符必须是tab,而不能是空格,否则,会把整条记录都当做key来进行sort,导致sort后出错.

v-for中key的使用

v-for中key的使用相关推荐

最新文章

热门文章