1.虚拟DOM中key的作用
     key是虚拟DOM对象的标识,当数据发生变化时,React/Vue会根据【新数据】生成新的【虚拟DOM】,随后React/Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
        (1)旧虚拟DOM中找到了与新虚拟DOM相同的key:
                a.若虚拟DOM中的内容没变,直接使用之前的真实DOM
                b.所虚拟DOM中的内容变了,则生成新的虚拟DOM,随后替换掉页面中之前的真实DOM
        (2)旧虚拟DOM中没找到与新虚拟DOM相同的key:
                创建新的真实DOM,随后渲染到页面
2.用index作为key可能会引发的问题:
        (1)若对数据进行:逆序添加、逆序删除等破坏顺序的操作,则会产生没必要的真实DOM更新 ==> 界面效果没问题,但是效率低
        (2)如果结构中还包含输入类的DOM则会产生错误的DOM更新 ==> 界面有问题
3.开发中如何选择key?
        (1)最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值;
        (2)如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作,仅用于渲染列表用于展示,使用index作为key也没有问题。

面试题:react、vue中的key的更多相关文章

  1. react,vue中的key有什么作用?(key的内部原理)

    1.虚拟DOM中的key的作用: key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟dom,随后vue进行新的虚拟dom与旧的虚拟dom的差异比较. 2.比较规则 ...

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

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

  3. React组件中的key

    React组件中的key 一.key的作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给reac ...

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

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

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

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

  6. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  7. Vue中的key到底有什么用?

    key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确.更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行 ...

  8. Vue 中的 key 有什么作用?

    key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确.更快速. Vue 的 diff 过程可以概括为:oldCh 和 newCh 各有两个头尾的变量 o ...

  9. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  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. Windows系统下找到占用当前端口的进程

    在进行服务调试时如果遇到端口冲突而不自知,可能会出现莫名其妙的错误.因此在不确定的情况下最好先查看要用的端口是否被占用. 下面介绍查看端口占用情况方法. 比如现在是要找到端口为8088的占用,在cmd ...

  2. 关于使用antd-proTable,报错 ResizeObserver loop limit exceeded

    错误如上,原因有几种情况 一:columns中,属性又ellipsis属性,但是没有设置width,导致table不知道如何计算在什么时候,开始对内容进行加省略号,出现了计算错误 如  const c ...

  3. vlan划分和设置

    今天用ensp模拟一个交换机vlan的划分和设置 先上拓扑图: 目标要实现每台电脑都能相互ping通并且都能ping通1.1.1.1/30 简单分析一下,先看交换机sw3,sw3直接和路由器相连,要实 ...

  4. ReentrantLock源码阅读

    默认构造方法初始化同步器为非公平同步器 /** * Creates an instance of {@code ReentrantLock}. * This is equivalent to usin ...

  5. PMP常见会议小结

    转载请注明出处: 会议是吸引项目团队和其他干系人参与的重要方式.它们是整个项目的主要沟通方式. 一. 项目启动会 召开时间:是启动阶段结束时召开的会议. 主要任务:发布项目章程,并任命项目经理,赋予项 ...

  6. 【ACM算法竞赛日常训练】DAY5题解与分析【储物点的距离】【糖糖别胡说,我真的不是签到题目】| 前缀和 | 思维

    DAY5共2题: 储物点的距离(前缀和) 糖糖别胡说,我真的不是签到题目(multiset,思维) 作者:Eriktse 简介:19岁,211计算机在读,现役ACM银牌选手力争以通俗易懂的方式讲解算法 ...

  7. 数据挖掘决策树—R实现

    决策树 决策树是一种树形结构,其中每个内部节点表示一个属性上的测试,每个分支代表一个测试输出,每个叶节点代表一种类别.分类树(决策树)是一种十分常用的分类方法.它是一种监督学习,所谓监督学习就是给定一 ...

  8. AIArena Frontend 初步练习

    尝试对starter项目的页面进行改变 修改侧边栏,只留下最上面的「仪表盘」和「列表页」两个大模块 in SideNav.vue the code for the sidebar menu is: & ...

  9. 四月十八日java基础知识

    1.由于每个对象的pi值都是相同的,所以没有必要让每个对象都保存有自己的pi值,因此将pi声明为静态变量,使之成为所有对象共用的存储空间,所有对象都公用pi这个变量也就是说共用的变量可以设定为静态变量 ...

  10. 四月十七日Java基础知识点

    1.默认构造方法:如果class前面有public修饰符,则默认的构造方法也会是public的.由于系统提供的默认构造方法往往不能满足需求,所以用户可以自己定义类的构造方法来满足需要,一旦用户为该类定 ...