官方说明:如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。

但是这样会产生很多问题。

这个时候引入 key 就可以解决这个问题:key 的作用是给予一个节点唯一的身份识别,有相同父元素的子元素必须有独特的 key 。

在v-for中,是必须要有key的,

注意:给key加上index等于没有加,key默认得就是Index

<a-radio-button :value="item.code"
v-for="(item) in metTypeArr" :key="item.code">
{{item.name}}
</a-radio-button>

vue特殊attribute-key的更多相关文章

  1. [Vue warn]: Attribute "id" is ignored on component <div> because the component is a fragment instanc

    今天在使用vue框架搭建环境时,遇到这个错误提示: [Vue warn]: Attribute "id" is ignored on component <div> b ...

  2. vue中使用key管理可复用的元素

    1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...

  3. vue.set( target, key, value ) this.$set(对象获数组,要更改的具体数据,重新赋值)用法

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 具体用法js代码: //设 ...

  4. VUE温习:内存泄漏、Vue.$set、key作用与虚拟diff算法

    一.内存泄漏 1.指令绑定了事件,却没有解绑事件,容易产生内存泄漏.(曾经遇到过的案例) 2.v-if指令产生内存泄漏,比如v-if删除了父级元素,却没有删除父级元素里的dom片段 3.跳转到别的路由 ...

  5. vue中:key 和react 中key={} 的作用,以及ref的特性?

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  6. 为什么要使用Vue.$set(target,key,value)

    vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2,数组通过索引值修改内容 vm.arr[1] = 'aa' Vue.$set(target,key, ...

  7. React/Vue里的key到底有什么用?看完这篇你就知道了!(附demo代码)

    网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...

  8. vue特殊属性 key ref slot

    1.key 当使用key时,必须设置兄弟元素唯一的key,当key排列顺序变化时,兄弟元素会重新排列,而当key的值变化时,这个元素会被重新渲染. 有相同父元素的子元素必须有独特的 key.重复的 k ...

  9. 015——VUE中使用key唯一令牌解决表单值混乱问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. vue 中$index $key 已经移除了

    https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...

随机推荐

  1. 《写给程序员的Python教程》阅读随笔---python禅学(Zen_of_python)

    Beautiful is better than ugly. Explicit is better than implicit. Simple is better than complex. Comp ...

  2. 5W1H聊开源之What——开源是什么?

    美国政治传播学家拉斯韦尔提出了5W传播模式,经过后人的不断运用和发展总结,形成了一套逐渐成熟的"5W1H"体系,即:对选定的项目.工序或操作,都要从原因(何因Why).对象(何事W ...

  3. #原根,BSGS,扩欧,矩阵乘法#CF1106F Lunar New Year and a Recursive Sequence

    题目 已知数列 \(f\) 满足 \(f_{1\sim k-1}=1\) 且 \(f_n=m\), 并且知道 \(f_i=(\prod_{j=1}^kf_{i-j}b_j)\bmod{99824435 ...

  4. #期望dp#洛谷 6835 [Cnoi2020]线形生物

    题目 分析 设\(f[i]\)表示由点\(i\)走到点\(i+1\)的期望步数, \(dp[i]\)表示由点1走到点\(i+1\)的期望步数, 那么\(dp\)为\(f\)的前缀和,最后答案为\(dp ...

  5. Docker学习路线12:开发者体验

    到目前为止,我们只讨论了使用Docker来部署应用程序.然而,Docker也是一个极好的用于开发应用程序的工具.可以采用一些不同的建议来改善开发体验. 在应用程序中使用docker-compose以方 ...

  6. Docker学习路线10:容器安全

    容器安全是实施和管理像Docker这样的容器技术的关键方面.它包括一组实践.工具和技术,旨在保护容器化应用程序及其运行的基础架构.在本节中,我们将讨论一些关键的容器安全考虑因素.最佳实践和建议. 容器 ...

  7. 当年老夫手写的cookie

    前言 留来来只为了回忆,旧博客迁移. 正文 /** * Created by OC on 20xx/8/27. */ function setCookie(name,value,expires,pat ...

  8. 什么是ip协议二

    前言 续前面一章. 正文 看下ip选项: 看一张图: 这个ip选项一般我们不用看,即使你去搞硬件,那么做c++或者c的人会告诉你填啥,按照他们设置即可. 那么ip是如何传输的呢? 先看这张图,这张图的 ...

  9. LRU缓存及其实现

    缓存是我们日常开发中来提高性能最直接的方式,经常会听到有人说:性能不行?是因为你没加缓存!常见的缓存有外部缓存服务以及程序内部缓存,外部缓存服务包括:Redis.Memcached等,内部缓存就是我们 ...

  10. 力扣304(java)-二维区域和检索-矩阵不可变(中等)

    题目: 给定一个二维矩阵 matrix,以下类型的多个请求: 计算其子矩形范围内元素的总和,该子矩阵的 左上角 为 (row1, col1) ,右下角 为 (row2, col2) .实现 NumMa ...