精华内容
下载资源
问答
  • 2022-04-07 16:36:10

    key是虚拟DOM中对象的标识,具有唯一性

    当数据发生改变时,Vue会根据新数据生成新的虚拟DOM,随后通过比较新旧虚拟DOM的key值是否相同,进行DOM元素的复用或更新

    因此Vue中key的作用主要是为了更高效的更新虚拟DOM,同时保障渲染的准确性


    以上内容为个人学习理解,如有不对,欢迎批评指正,谢谢!

    更多相关内容
  • key的特殊attribute主要用在Vue的虚拟DOM算法,在新旧Nodes对比时辨识VNodes。这篇文章主要给大家介绍Vue中key作用,感兴趣的朋友跟随小编一起看看吧
  • Vue中key作用及原理

    千次阅读 多人点赞 2021-10-11 23:31:22
    vue中key作用是什么?实现原理是什么?如果不写会怎么样?

    1. 先说结论

    • key在Vue是DOM对象的标识;
    • 进行列表展示时,默认key是index;
    • 如果数据只做展示使用,使用index作为key是没有任何问题的;
    • 如果使用index作为key,而后续操作会破坏顺序,一定会带来效率问题,严重时会渲染出错误的DOM

    关于key的作用及实现原理,下面一一道来。

    2. key的作用

    key就是一个标识,被使用在Vue中。再详细一点,key被使用在Vue中的虚拟DOM中,并不会出现在真实DOM中。

    2.1 举一个例子

    以列表的形式展示一组人员信息

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>key的原理</title>
    
        <!--引入vue-->
        <script type="text/javascript" src="../js/vue.js"></script>
        
    </head>
    <div id="root">
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) in persons">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>
    <body>
        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    persons:[
                        {'id':'001', 'name':'张三','age':'18'},
                        {'id':'002', 'name':'李四','age':'19'},
                        {'id':'003', 'name':'王五','age':'20'}
                    ]
                }
            })
        </script>
    </body>
    </html>
    

    这个html文件在浏览器中打开如下图所示。

    image-20211011224230413

    而上述示例html文件中并没有使用到key,似乎也没有问题。当然,单纯地展示数据,不写key是不会存在问题的。

    现在我们为上述示例加上key,这里以每条数据的id为key

    <li v-for="(p,index) in persons" :key="p.id">
        {{p.name}}-{{p.age}}
    </li>
    

    加上key的展示结果和上图结果一模一样。

    image-20211011224928540

    而如果我们在浏览器上查看元素,不会看到key的存在。

    image-20211011225246624

    截至目前,我们可以得到两个结论:1. 只做数据展示用,不写key是没有任何影响的;2.key不会出现在真实DOM中

    实际上,即使不写key,Vue在生成真实DOM时,也用到了key,默认是数据索引(index)

    我们把key替换为index,展示的数据不会产生任何改变。

    <li v-for="(p,index) in persons" :key="index">
    	{{p.name}}-{{p.age}}
    </li>
    

    2.2 修改一下上述示例

    在展示人员信息的基础上显示索引,并且添加一个按钮,功能是在头部添加人员信息

    对上述html文件稍加修改。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>key的原理</title>
    
        <!--引入vue-->
        <script type="text/javascript" src="../js/vue.js"></script>
        <link rel="icon" href="../favicon.ico" type="image/x-icon" />
    
    </head>
    <div id="root">
        <h2>人员列表</h2>
        <button @click="add">添加一个老刘</button>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}-{{index}}
            </li>
        </ul>
    </div>
    <body>
        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    persons:[
                        {'id':'001', 'name':'张三','age':'18'},
                        {'id':'002', 'name':'李四','age':'19'},
                        {'id':'003', 'name':'王五','age':'20'}
                    ]
                },
                methods:{
                    add(){
                        const p = {'id':'004', 'name':'老刘','age':'40'}
                        this.persons.unshift(p)
                    }
                }
            })
        </script>
    </body>
    </html>
    

    我们可以看到,张三、李四、王五的索引分为别0,1,2

    image-20211011230442273

    点击按钮,添加一个新人物,这个时候索引发生了变化,新添加的人物“老刘”变为了索引0,似乎对,也似乎不对

    image-20211011230815984

    当然,单纯地讨论索引,这里一点问题也没有,下面举一个新例子,来说说“不对“在哪里

    2.3 再修改一下示例

    不展示索引了,改为输入框,在每个人物后面的输入框内写上人物的姓,观察新插入数据后原始数据的变化

    稍微修改一下html

    <li v-for="(p,index) in persons" :key="index">
        {{p.name}}-{{p.age}}
        <input type="text">
    </li>
    

    实际效果就是下图这样

    image-20211011231349758

    到这里,似乎没有什么不对,接下来就是见证奇迹的时刻

    添加老刘,出现了问题,和我们预想的不一样。

    image-20211011231548484

    这是key为index的情况,如果修改为数据的唯一标识,则不会产生这样的问题。

    <li v-for="(p,index) in persons" :key="p.id">
        {{p.name}}-{{p.age}}
        <input type="text">
    </li>
    

    诶,这就是我们想要的。

    image-20211011231848647
    列表内有输入内容,后续操作破坏了原始顺序,如果以index作为key,就会产生错误DOM

    3. key的实现原理

    要解释key的实现原理,就要引入Vue一个十分重要的概念——【虚拟DOM】。

    给出一组数据,Vue要把这些数据渲染到页面上,首先要生成【虚拟DOM】,然后根据【虚拟DOM】去生成【真实的DOM】。如果数据发生了改变,Vue会生成【新的虚拟DOM】,注意,这个【新的虚拟DOM】并不会直接生成【新的真实DOM】,否则虚拟DOM一点用处也没有了。Vue的操作是,拿根据新的数据生成的【新的虚拟DOM】与之前的【真实的DOM】去做比较,如果相同,直接延用即可(“拿来主义”);如果不同,则生成新的DOM对象。

    在这个过程中key扮演了很重要的角色

    根据最后一个示例进行剖析。

    1. key为index的情况。

    根据数据生成【真实DOM】的流程如下:(注意,下图的真实DOM中输入框里的内容为生成页面后手动添加)

    在这里插入图片描述

    然后,添加人物“老刘”,获取到一组新数据

    在这里插入图片描述

    Vue拿新数据生成【新的虚拟DOM】

    在这里插入图片描述

    在生成真实DOM,就需要用新生成的虚拟DOM和原来的真实DOM作比较(一条一条分析)

    在这里插入图片描述

    对比第一条,key为0,找到旧DOM中key为0的数据,发现“老刘-40”和“张三-18”不同,渲染新的数据“老刘-40”到页面上;再往后,发现同为输入框,不必重新渲染,直接使用原来真实DOM的内容。第一条内容就出现了,而这个输入框还携带有张三的姓。

    在这里插入图片描述

    对比第二条,key为1,找到旧DOM中key为1的数据,发现“张三-18”和“李四-19”不同,渲染新的数据“张三-18”到页面上;再往后,发现同为输入框,不必重新渲染,直接使用原来真实DOM的内容。第二条内容就出现了,而这个输入框还携带有李四的姓。

    在这里插入图片描述

    之后同理。

    回顾这个过程,key是作为虚拟DOM中对象的唯一标识,标识出了数据的“身份信息”,Vue在虚拟DOM中会根据这个“身份标识”去对比内容,设计的初衷是为了节省资源开支,不必渲染重复的部分。在本示例中,不但带来了效率问题,还渲染出了错误的DOM,后果非常严重。

    2. key为id的情况。

    直接进入添加“老刘”后的新旧DOM对比。

    在这里插入图片描述

    对比第一条,key为‘004’,发现在旧DOM中并不存在,直接生成“老刘-40”和新的输入框。

    对比第二条,key为‘001’,发现旧DOM中key为‘001’的数据相同,直接将“张三-18”和输入框拿过来使用。

    ……

    最后生成正确的DOM,节省了资源开支。

    3. 总结

    推荐使用数据的唯一标识作为key,比如id,身份证号,手机号等等,通常这些数据由后端提供。

    后续操作不破坏原来数据顺序的话,使用index作为key也没有任何问题。

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

    2022-02-21 11:11:01
    官方文档解释: key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 ...v-if 使用 key 由于 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是

    官方文档解释:

    key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用
    key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key
    的变化重新排列元素顺序,并且会移除 key 不存在的元素。

    有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

    v-if 中使用 key

    由于 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。因此当我们使用 v-if 来实现元素切换的时候,如果切换前后含有相同类型的元素,那么这个元素就会被复用。如果是相同的 input 元素,那么切换前后用户的输入不会被清除掉,这样是不符合需求的。因此我们可以通过使用 key 来唯一的标识一个元素,这个情况下,使用 key 的元素不会被复用。这个时候 key 的作用是用来标识一个独立的元素。

    v-for 中使用 key

    用 v-for 更新已渲染过的元素列表时,它默认使用“就地复用”的策略。如果数据项的顺序发生了改变,Vue 不会移动 DOM 元素来匹配数据项的顺序,而是简单复用此处的每个元素。因此通过为每个列表项提供一个 key 值,来以便 Vue 跟踪元素的身份,从而高效的实现复用。这个时候 key 的作用是为了高效的更新渲染虚拟 DOM。

    diff算法中

    同级比较、深度优先,我们通过唯一的Id进行区别,另diff算法的复杂度从O(n^3)降到了O(n)

    展开全文
  • vue中key作用

    千次阅读 2022-03-26 17:50:01
    下面总结一下,vue中key作用,在vue中我们可能在两种情况下使用key,第一种情况下就是在v-if,第二种情况下就是在v-for使用key。下面我们来看一下key在其中起到的作用。 二、在v-if使用key 首先我们先看在...

    一、写在前面
    下面总结一下,vue中的key的作用,在vue中我们可能在两种情况下使用key,第一种情况下就是在v-if中,第二种情况下就是在v-for中使用key。下面我们来看一下key在其中起到的作用。
    二、在v-if中使用key
    首先我们先看在vue中出现的一种情况,我们在vue中如果使用v-if进行切换时,此时Vue为了更加高效的渲染,此时会进行前后比较,如果切换前后都存在的元素,则直接复用。如果我们在模板中切换前后都存在input框,此时我们在input框中写入一些数据,并且进行页面切换,则原有的数据就会保存。
    此时我们就可以使用key,给每一个input框,添加一个唯一的标识key,来表示元素的唯一性。
    三、在v-for中使用key
    对于用v-for渲染的列表数据来说,数据量可能一般很庞大,而且我们经常还要对这个数据进行一些增删改操作。那么整个列表都要重新进行渲染一遍,那样就会很费事。而key的出现就尽可能的回避这个问题,提高效率。v-for默认使用就地复用的策略,列表数据修改的时候,他会根据key值去判断某一个值是否修改,如果修改则重新渲染该项,否则复用之前的元素。在v-for中我们的key一般为id,也就是唯一的值,但是一般不要使用index作为key。

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

    千次阅读 2021-04-29 21:15:40
    Vue中key值的作用 首先v-for 在列表渲染时,我们可以用v-for基于一个数组来渲染一个列表。v-for指令需要使用item in arr形式的特殊语法来进行渲染列表,arr是源数据, <ul id="example-1"> <li v-for=...
  • vue中key作用

    千次阅读 2020-06-27 12:34:09
    key作用 1在渲染列表的时候使用key,如果不使用的时候会进行警告。当v-for循环渲染时,不加上key的时候会默认采用原地复用原则。即,不会移动或重新渲染dom元素或者标签,而是单纯的改变数据,对数据进行更新。 ...
  • 理解Vue中 key作用

    千次阅读 2020-03-04 11:44:48
    key的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。 如果不使用 keyVue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。 而使用 key 时,它会...
  • vue中key作用(简单易理解)

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

    千次阅读 2020-11-03 15:20:55
    key作用:在diff算法执行时,更快的找到对应的节点,高效的更新虚拟dom, key是具有唯一性的,所以在每次for循环的时候,我们需要key给每个节点做唯一的标识,唯一标识可以使item里面id index 等 然后diff算法就...
  • 1、虚拟DOM中key作用key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下: 2、对比规则: (1)旧虚拟...
  • vue中 key 值的作用

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

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

    千次阅读 2020-10-03 13:57:34
    1、key作用主要是为了高效的更新虚拟DOM,其原理是vue在patch过程通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同元素,使得整个patch过程更加高效,减少DOM操作量,提高性能。 2、另外,若不...
  • vue中key作用

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

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

    千次阅读 2022-03-11 11:44:38
    key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 keyVue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它...
  • vue中key作用及diff算法

    千次阅读 2019-11-18 10:28:27
    Vue2.0 v-for :key 到底有什么用呢? 其实呢不只是vue,react在执行列表渲染时也会要求给每个组件添加key这个属性。 key简单点来说就是唯一标识,就像ID一样唯一性 要知道,vue和react都实现了一套虚拟DOM,使...
  • vue中key

    千次阅读 2020-05-15 17:20:01
    当选吕不为时,添加楠楠后选中的确是李斯,并不是我们想要的结果,我们想要的是当添加楠楠后,一种选中的是吕不为
  • vue中Diff算法、key作用原理

    千次阅读 2020-05-21 16:45:12
    1、Diff算法步骤: 用js对象结构(虚拟DOM)表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中 ...2、key作用原理: 唯一标识,为了高效的更新虚拟DOM transition过渡时,使用key属性,可以
  • 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作用

    千次阅读 2019-11-09 21:27:33
    作用:可以高效渲染虚拟DOM树。 使用V-for更新已渲染的元素列表时,默认采取的方法是就地更新 我在这里打个栗子。我想把F元素插入到A B C D E。 你以为他是这么插的。 其实他是这么插的 第一个原来是A...
  • 你知道Vue中key作用和工作原理吗?说说你对它的理解。 源码追溯:src/core/vdom/patch.js-updateChildren() 结论 1.key的主要作用是为了高效的更新虚拟DOM,其原理是vue在patch过程通过key可以精准判断两个节点...
  • vue中唯一key

    千次阅读 2020-11-20 17:14:37
    Vue key作用是:key 是为 Vue vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速。利用唯一key来获取对应节点,比遍历更快。 Vue中的virtual DOM virtual DOM是将真实的DOM的数据抽取...
  • vue中v-for: key作用

    千次阅读 2021-01-07 22:24:26
    在使用vue列表渲染v-for时,我们最好在后面加上: key,它的作用是当v-for所绑定的数据发声变化时只重新渲染变化的项,而不是重新渲染整个列表,这除了可以节约资源以外更重要的是可以避免一些bug,比如使用列表渲染...
  • vue中Key值重复

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

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

    千次阅读 2020-12-21 22:11:25
    key 的一个错误使用——使用 index 作为 key不知道你在写 v-for 的时候,会不会直接使用 index 作为它的 key 值,是的,我承认我会,不得不说,这真的不是一个好习惯。以下是核心代码,其中 arrData 的值为 [1,2,3,4...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 181,433
精华内容 72,573
关键字:

vue中key的作用

友情链接: CHT.rar