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. win10edge浏览器个人账户退出登录后再次登录自动登录问题

    edge浏览器退出登录后,再次点击登录以同步数据会自动登录,可查看书签等个人数据 解决方法: 先在浏览器里面退出账户. 1.设置--电子邮件和账户--管理 2.登录后--安全--安全仪表板--高级安全 ...

  2. 使用request对象实现注册示例,请求方式的编码问题

    get提交方式: method="get"和地址栏请求方式默认都属于get提交方式 get方式在地址栏显示请求信息﹐(但是地址栏能够容纳的信息有限,4-5KB;如果请求数据存在大文 ...

  3. 常见Dos命令学习

    Dos命令行 打开CMD方法 开始+系统+命令提示符(方便以管理员身份运行) Win+R 输入cmd 打开控制台(最常用) 在任意文件夹下,按住Shift键+鼠标右键点击,选择"在此处打开P ...

  4. Python项目案例开发从入门到实战-1.5Python文件的使用

    Python对文件的操作通常按照三个步骤进行: un 使用open()函数打开(或建立)文件,并返回一个file对象. deux 使用file对象的读写方法对文件进行读写操作. trois 使用fil ...

  5. windows系统下使用java语言,在mysql数据库中做定时数据备份、删除

    有这样一个业务需求,需要将数据归档的表每月定时备份,并且删除之前表中的数据,话不多说,直接上代码! 注意:这种方法适合数据量小,业务要求不高的场景! 项目采用SpringBoot  + MyBatis ...

  6. GO语言学习笔记-并发篇 Study for Go ! Chapter seven - Concurrency

    持续更新 Go 语言学习进度中 ...... GO语言学习笔记-类型篇 Study for Go! Chapter one - Type - slowlydance2me - 博客园 (cnblogs ...

  7. 认证全家桶(Cookie、Session、Token、JWT)

    什么是认证(Authentication) 通俗地讲就是验证当前用户的身份,证明"你是你自己"(比如:你每天上下班打卡,都需要通过指纹打卡,当你的指纹和系统里录入的指纹相匹配时,就 ...

  8. windows下使用route添加路由

    1,首先在"运行"窗口输入cmd(按WIN+R打开运行窗口),然后回车进入命令行. 2,在命令行下输入route命令,会有对应的提示信息. ROUTE [-f] [-p] [-4| ...

  9. 研发效能负责人/研发效能1号位 |DevOps负责人

    想要做好业务,老板们除了要梳理好公司级别的业务目标,公司的组织架构,还要搭个有产出的班子,也就是找负责人.建团队,让组织架构充实起来.搭班子最重要的就是把负责人找到,就是团队1号位的人.本文主要讲团队 ...

  10. Nacos 服务发现

    更多内容,前往 IT-BLOG 一.Nacos 简介 Nacos 是阿里的一个开源产品,它是针对微服务架构中的服务发现.配置管理.服务治理的综合型解决方案.Nacos 使服务更容易注册,并通过 DNS ...