精华内容
下载资源
问答
  • 主要给大家介绍了关于如何正确理解vue中key的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue中key的作用

    千次阅读 2019-05-01 18:20:34
    不加key就会报错,那么在vue中也是这样吗? 在diff算法(详解vue的diff算法)key可以管理可复用的元素,减少不必要的元素的重新渲染,也要让必要的元素能够重新渲染。 references: 《实战vue》梁灏 vue总是...

    我们都知道在react中,key是用来追踪列表中哪些元素被修改、删除或者被添加的辅助共识并且<li>不加key就会报错,那么在vue中也是这样吗?

    在diff算法(详解vue的diff算法)中,key可以管理可复用的元素,减少不必要的元素的重新渲染,也要让必要的元素能够重新渲染。

    references:

    《实战vue》梁灏

    vue总是尽可能高效的渲染元素而不是从头渲染,这也是diff算法的精髓。但是有些情况下并不是符合需求的,譬如:

    你允许用户在不同的登录方式之间切换

    <template>
    	<div class="test">
    		<div v-if="loginType === 'username'">
    		  <label>Username:</label>
    		  <input type="text" placeholder="Enter your username"/>
    		</div>
    
    		<div v-else>
    		  <label>Email:</label>
    		  <input type="text" placeholder="Enter your email address"/>
    		</div>
    		<button type="button" @click="handleToggleClick">切换输入类型</button>
    	</div>
    </template>
    <script type="text/javascript">
    	export default{
    		data(){
    			return{
    				loginType:'username'
    			}
    		},
    		methods:{
    			handleToggleClick(){
    				this.loginType = this.loginType ==='username'?'Email':'username' ;
    			}
    		}
    	}
    </script>
    <style type="text/css">
    </style>

    那么在上面的代码中切换loginType将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,仅仅是替换了它的 placeholder。

    如下图:

    切换前

    切换后

    这样并不符合实际需求,所以Vue为你提供了一种方式来表达这两个元素是完全独立的,不要复用它们。只需添加一个具有唯一值的 key 属性即可:

    <template>
    	<div class="test">
    		<div v-if="loginType === 'username'">
    		  <label>Username:</label>
    		  <input type="text" placeholder="Enter your username"key="username-input"/>
    		</div>
    
    		<div v-else>
    		  <label>Email:</label>
    		  <input type="text" placeholder="Enter your email address" key="email-input"/>
    		</div>
    		<button type="button" @click="handleToggleClick">切换输入类型</button>
    	</div>
    </template>
    <script type="text/javascript">
    	export default{
    		data(){
    			return{
    				loginType:'username'
    			}
    		},
    		methods:{
    			handleToggleClick(){
    				this.loginType = this.loginType ==='username'?'Email':'username' ;
    			}
    		}
    	}
    </script>
    <style type="text/css">
    </style>

    这样就可以啦:

    切换前

    切换后

     

    展开全文
  • Vue中key属性的作用

    万次阅读 多人点赞 2019-01-26 08:47:36
    Vue中key属性的作用在列表渲染时使用key属性使用key属性强制替换元素 在列表渲染时使用key属性 相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用key属性,Vue会产生警告,那么在这...

    在列表渲染时使用key属性

    相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用key属性,Vue会产生警告,那么在这个时候key属性的作用是什么呢?

    官方文档中说:

    当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

    假设Vue实例的data属性中有一个叫numbers的变量,它的值是[1, 2, 3, 7, 8, 9]

    <div v-for="num in numbers">
      {{num}}
    </div>
    

    这种情况下应当是渲染了6个<div>元素,其中的内容分别对应numbers中6个数字,此时如果numbers变成了[0, 1, 2, 3, 7, 8, 9],即在数组头部插入了一个数字0,在没有key属性的情况下,渲染输出的更新步骤是这样的:

    原先内容为1<div>元素内容变成0,原先内容为2<div>元素内容变成1,……以此类推,最后新增一个<div>元素,内容为9

    在这种情况下,Vue会通过改变原来元素的内容和增加/减少元素来完成这个改变,因为没有key属性,Vue无法跟踪每个节点,只能通过这样的方法来完成变更。

    让我们对以上代码进行一个小修改:

    <div v-for="(num, index) in numbers" :key="index">
      {{num}}
    </div>
    

    我这里用index变量,根据列表渲染的规则,它实际上对应了数组中每个元素的索引,这样做的好处是它可以使得每个元素的key值都不同,这是很重要的,如果我们要利用key属性的优点,必须保证同一父元素的所有子元素有不同的key属性

    此时如果numbers[1, 2, 3, 7, 8, 9]变成了[0, 1, 2, 3, 7, 8, 9],渲染输出的更新步骤就变化了:

    新增一个<div>元素,它的内容为0,并将它插入原先内容为1的元素之前。

    在有了key属性之后,Vue会记住元素们的顺序,并根据这个顺序在适当的位置插入/删除元素来完成更新,这种方法比没有key属性时的就地复用策略效率更高。

    总体来说,当使用列表渲染时,永远添加key属性,这样可以提高列表渲染的效率,提高了页面的性能。

    使用key属性强制替换元素

    key属性还有另外一种使用方法,即强制替换元素,从而可以触发组件的生命周期钩子或者触发过渡。因为当key改变时,Vue认为一个新的元素产生了,从而会新插入一个元素来替换掉原有的元素。

    借用官方文档上的例子:

    <transition>
      <span :key="text">{{text}}</span>
    </transition>
    

    这里如果text发生改变,整个<span>元素会发生更新,因为当text改变时,这个元素的key属性就发生了改变,在渲染更新时,Vue会认为这里新产生了一个元素,而老的元素由于key不存在了,所以会被删除,从而触发了过渡。

    假如没有key属性:

    <transition>
      <span>{{text}}</span>
    </transition>
    

    那么当text改变时,Vue会复用元素,只改变<span>元素的内容,而不会有新的元素被添加进来,也不会有旧的元素被删除。

    同理,key属性被用在组件上时,当key改变时会引起新组件的创建和原有组件的删除,此时组件的生命周期钩子就会被触发。

    展开全文
  • vue中key的作用(简单易理解)

    千次阅读 2020-07-01 14:46:26
    其实不只是vue,react在执行列表渲染时也会要求给每个组件添加上key这个属性。 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了。 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素...

    因为不理解 :key(v-bind:key),网上查了一些的资料,这篇写得非常不错,很简洁清楚。

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性。

    要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了。

    我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

      **vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:**
    
    • 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。
    • 同一层级的一组节点,他们可以通过唯一的id进行区分。

    基于以上这两点假设,使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。

    这里我们借用React’s diff algorithm中的一张图来简单说明一下:
    在这里插入图片描述

    ** 如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点以后的子节点了。

    ** 如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新。
    在这里插入图片描述

    我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的:

    image
    即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?
    所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

    image

    所以一句话,**key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,
    

    否则vue只会替换其内部属性而不会触发过渡效果。

    本篇来自:https://www.jianshu.com/p/0044532e4a93 如有雷同,纯属缘分

    展开全文
  • vue中Key值重复

    千次阅读 2020-03-19 15:40:46
    vue中Key值重复 今天用jeecg-boot 做从页面传时间到modal表格查询数据时报错,只要后台多表连接另一个时间表前端就报错,显示key值重复。 下面展示一些 报错信息。 Duplicate keys detected: ‘1’. This may ...

    vue中Key值重复

    今天用jeecg-boot 做从页面传时间到modal表格中查询数据时报错,只要后台多表连接另一个时间表前端就报错,显示key值重复。

    下面展示一些 报错信息

    Duplicate keys detected: ‘1’. This may cause an update error.

    网上百度后显示我 table表格的key重复了 , 在这里插入图片描述然后我改了 rowKey 给他加了唯一标识 rowKey=“id+‘s’” 后就不再重复了,但是在查询的时候又出来另一个错,没条数据都要有同样的Key值,于是我再初始加载的方法里加了下面展示一些 内联代码片

      created() {
         data.forEach((item, index) => {
            item.key = index + 1;
          })
        }
    

    但是这样就会显示data找不到 dataSource 在jeecgboot中是封装了的所以得把方法拿到页面上来。我试了许久无果后,就看了看数据库才发现数据库id 因为我查时间的原因很多重复,于是我做了按时间一个分组发现就不报错了。

    展开全文
  • vue中 key 值的作用

    万次阅读 2019-08-03 11:16:45
    什么是keykey值:用于 管理可复用的元素。...2.2.0+ 的版本里,当在组件使用 v-for 时,key 是必须的。 //例如,如果你允许用户在不同的登录方式之间切换: <template v-if="loginType === 'username'...
  • vue中key的作用及diff算法

    千次阅读 2019-11-18 10:28:27
    Vue2.0 v-for :key 到底有什么用呢? 其实呢不只是vue,react在执行列表渲染时也会要求给每个组件添加key这个属性。 key简单点来说就是唯一标识,就像ID一样唯一性 要知道,vue和react都实现了一套虚拟DOM,使...
  • 你知道Vue中key的作用和工作原理吗?说说你对它的理解。 源码追溯:src/core/vdom/patch.js-updateChildren() 结论 1.key的主要作用是为了高效的更新虚拟DOM,其原理是vue在patch过程通过key可以精准判断两个节点...
  • vue中key关键字的使用

    千次阅读 2019-07-30 09:18:42
    解释 当使用v-for更新已经渲染过的元素列表时,默认用...为了给Vue.js 追踪每个节点的身份,从而重用或重新排列现有的元素,需要提供一个唯一的Key属性特殊的属性使用v-bind来动态绑定值(全写“ v-bind:key” 简...
  • vue中key的作用以及原理

    千次阅读 2020-11-03 15:20:55
    key的作用:在diff算法执行时,更快的找到对应的节点,高效的更新虚拟dom, key是具有唯一性的,所以在每次for循环的时候,我们需要key给每个节点...2.2.0+ 的版本里,当在组件使用 v-for 时,key 是必须的 原理: k.
  • Vue中列表渲染指令中key属性的理解

    千次阅读 2018-08-09 14:24:32
    在官网看到v-for指令中key这一块时,对其感觉懵懵懂懂,查阅了一些资料,把自己的理解记录下来,做一个心得,不知道理解的对不对,希望有大牛指导。 参考链接:https://segmentfault.com/a/1190000013810844 Vue...
  • Vue的DOM构建机制中理解key

    千次阅读 2018-02-07 22:38:02
    最近在学vue,看完vue的基础部分后大部分的知识都很容易理解,唯独频频提到的key让我疑惑了很久~官方文档上对key的第一次描述是:如果只是单纯的看文档,理解的可能不是太清楚,所以我专门写了上面这个demo来验证...
  • vue中关于v-for循环中key中出错的解决方法: 报错原因是key值是唯一的,重复使用,查看代码 v-bind:key=“todo.id” 所以在此处id的值并不是唯一的,所以需要把v-bind:key="index"就可以了。 ...
  • 简单的理解vue中data数据的改变影响视图 前言 这个简化了vue虚拟dom的渲染,为了更好地理解vue中data数据的改变影响视图这句话而写的。 请熟知 Object.defineProperty和原型原型链的知识,闭包也要有所掌握 我们...
  • Vue中key的作用

    千次阅读 2019-07-15 13:53:41
    <div v-for="item in list" :key=item.id>{{item.value}}<...Vue diff算法key相关的逻辑: /** * oldKeyToIdx:旧虚拟节点的key-index的映射对象,如{ key0: index0, key1: index1,... } *...
  • Vue key 有什么作用?

    千次阅读 2019-09-12 14:30:23
    一、首先让我们看一下vue中的源码中key值的使用 因为key值的使用主要是在diff算法中用到, 所以我们可以在vue源码的src\core\vdom\patch.js目录可以找到相关代码来进行分析。 sameVnode函数 从代码上可以看到,...
  • 深入理解vue

    万次阅读 多人点赞 2018-02-24 16:55:11
    倘若用一句话来概括vue,那么我首先想到的便是官方文档的一句话: Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。 这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了...
  • vue遍历中key详解 (Demo案例)

    千次阅读 2021-02-19 22:06:03
    【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程遇到的问题...做vue项目,之前做到关于遍历数组对象找那个的数组,里面涉及到ke.
  • vue中v-for中key值的作用

    千次阅读 2019-07-15 20:45:07
    vue中v-for中key值的作用 其实不只是vue,react在执行列表渲染时也会要求给每个组件添加上key这个属性。 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了。 我们知道,vue和react都实现了一套虚拟DOM,使...
  • vue中数组加Key

    千次阅读 2020-04-09 17:37:49
    其中 list是原数组,numberList是转化后的数组,value是key的名称 在使用element的el-autocomplete远程搜索组件时,普通的数组不能匹配,需要带有可以的数组才可以。 这是普通数组 转化成key为value的数组: ...
  • 否则Vue将会复用之前的节点,通过改变节点的属性来实现节点的更新。 二、key使用id与index的区别 不推荐使用index作为key,因为这种做法会导致某些节点被错误地原地复用,具体如下: 性能损耗:列表渲染时会导致...
  • Vuekey的使用

    千次阅读 2018-04-24 12:07:18
    1. 用法&lt;div v-for="item in items":key="item.id"&gt;&lt;...key 的特殊属性主要用在 Vue的虚拟DOM算法,...如果不使用keyVue会使用一种最大限度减少动态元素并且尽可能的尝试...
  • vue中v-for为何要加key?index为何不推荐作为key

    千次阅读 多人点赞 2020-08-07 00:49:52
    在使用vue组件的时候,我们经常会遇到v-for必须要加key值 来举个例子进行说明吧! 不存在key的情况 <!-- * @Author: angula * @Date: 2020-08-07 00:05:05 * @LastEditTime: 2020-08-07 00:17:21 * @FilePath...
  • Vue key的作用

    万次阅读 2017-11-02 21:57:18
    1、v-if中用 key 管理可复用的元素 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做,除了使 Vue 变得非常快之外,还有一些有用的好处。例如,如果你允许用户在不同的登录方式之间...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 136,820
精华内容 54,728
关键字:

如何理解vue中的key

vue 订阅