面试题:react、 vue中的key有什么作用? (key的内部原理)

这篇具有很好参考价值的文章主要介绍了面试题:react、 vue中的key有什么作用? (key的内部原理)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

面试题:react、 vue中的key有什么作用? (key的内部原理)

面试题:react、 vue中的key有什么作用? (key的内部原理)面试题:react、 vue中的key有什么作用? (key的内部原理)

1.虚拟DOM中key的作用:

key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟DON】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:

2.对比规则:

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:

  • .若虚拟DOM中内容没变,直接使用之前的真实DOM !
  • .若虚拟DON中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM.

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

  • 创建新的真实DOM,随后渲染到到页面。
3.用index作为key可能会引发的问题:

1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。

2.如果结构中还包含输入类的DOM:会产生错误DOM更新==>界面有问题。

4.开发中如何选择key? :

1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。文章来源地址https://www.toymoban.com/news/detail-444021.html

到了这里,关于面试题:react、 vue中的key有什么作用? (key的内部原理)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 面试题-React(二):React中的虚拟DOM是什么?

    一、什么是虚拟DOM? 虚拟DOM是React的核心概念之一,它是一个轻量级的JavaScript对象树,用于表示真实DOM的状态。在React中,当数据发生变化时,首先会在虚拟DOM上执行DOM更新,而不是直接操作真实DOM。然后,通过比较前后两个虚拟DOM的差异,最小化真实DOM的操作,从而减少页

    2024年02月12日
    浏览(48)
  • Vue中的$nextTick有什么作用?

    官方对其的定义 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM 什么意思呢? 我们可以理解成, Vue  在更新  DOM  时是异步执行的。当数据发生变化, Vue 将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后

    2024年02月22日
    浏览(38)
  • React、Vue框架如何实现组件更新,原理是什么?

    原文合集地址如下,有需要的朋友可以关注 本文地址 合集地址 React 和 Vue 都是当今最流行的前端框架,它们都实现了组件化开发模式。为了优化性能,两者都采用了虚拟DOM技术。当组件状态发生改变时,它们会使用虚拟DOM进行局部渲染比对,只更新必要的DOM节点,从而避免重新渲染

    2024年02月17日
    浏览(52)
  • React和Vue 中的 router 实现原理如何

    React 和 Vue 中的路由器(Router)实现原理类似,都是基于监听 URL 变化,然后根据不同的 URL 加载相应的组件或页面。下面是它们的一般实现原理: React Router 实现原理: History API:  React Router 使用 HTML5 History API(pushState() 和 replaceState() 方法)来操作浏览器的历史记录,从而

    2024年02月20日
    浏览(48)
  • C语言常见面试题:什么是宏,宏的作用是什么?

    宏在计算机科学中是一种批量处理程序命令,它是一种抽象的规则或模式,用于说明某一特定输入(通常是字符串)如何根据预定义的规则转换成对应的输出(通常也是字符串)。在编译时,预处理器会对宏进行展开,即将宏的内容替换到宏所在的位置。 宏的作用主要有以下

    2024年01月23日
    浏览(38)
  • 【Python 基础】输入两个数,求它们的求最大公约数(伪码描述 + Python实现)| 区块链 面试题:区块链技术中的“闪电网络”是什么?有什么作用?

      “这样的年代没有谁是值得信任的,你只能靠自己。”     🎯作者主页: 追光者♂🔥          🌸个人简介:   💖[1] 计算机专业硕士研究生💖   🌿[2] 2023年城市之星领跑者TOP1(哈尔滨)🌿   🌟[3] 2022年度博客之星人工智能领域TOP4🌟   🏅[4] 阿里云社区特邀专家博

    2024年02月01日
    浏览(70)
  • 【JavaSE】什么是抽象类?什么是内部类?以及它们的作用是什么?

     这篇文章我们主要学习的是两个知识点,可以来解决文章标题所提出来的三个问题。   目录 1.抽象类 1.1 抽象类概念 1.2 抽象类语法 1.3 抽象类特性 1.4 抽象类的作用 2.内部类 2.1 内部类的分类 2.2 实例内部类 2.3 静态内部类 2.4 匿名内部类 2.5 局部内部类 在多态的学习中,我们

    2024年02月14日
    浏览(53)
  • 【Python & 机器学习 基础】绘制 sigmoid 函数曲线 | exp:以e为底的指数函数(科普向)| 区块链 面试题:区块链技术中的“区块链浏览器”是什么?有什么作用?

      “谁都了解生存往往比命运还残酷,只是没人愿意认输,我们都在不断赶路,忘记了出路。”     🎯作者主页: 追光者♂🔥          🌸个人简介:   💖[1] 计算机专业硕士研究生💖   🌿[2] 2023年城市之星领跑者TOP1(哈尔滨)🌿   🌟[3] 2022年度博客之星人工智能领域

    2024年02月06日
    浏览(46)
  • Vue.js 中的响应式原理是什么?

    Vue.js 是一种流行的前端框架,它使用了一种称为“响应式”的技术来实现数据绑定。这意味着当数据发生变化时,Vue.js会自动更新相关的视图,而无需手动操作DOM。在本文中,我们将深入探讨Vue.js中的响应式原理。 在Vue.js中,响应式是指当数据发生变化时,相关的视图将自

    2024年02月07日
    浏览(38)
  • react中refs的作用是什么?有几种用法?

    在 React 中,ref 是用来获取组件或 DOM 元素的引用的一种方式。ref 可以在组件挂载后被访问,并且允许您从组件中访问底层的 DOM 元素或组件实例。 ref 有两种用法:字符串 ref 和回调函数 ref。 字符串 ref(string refs)是一种早期的使用 ref 的方式。它通过设置 ref 属性为一个字

    2024年01月20日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包