1.虚拟DOM中的key的作用:

key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟dom,随后vue进行新的虚拟dom与旧的虚拟dom的差异比较。

2.比较规则

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

若虚拟dom中内容没变,直接使用之前的真实的dom

若虚拟dom内容变了,则生成新的真实的dom,随后替换掉之前的真实的dom

(2)旧虚拟dom中未找到与新虚拟dom相同的key创建新的真实的dom,随后渲染到页面。

3.用index作为key可能会引发的问题:

(1)若对数据进行逆序添加,逆序删除hi破坏顺序操作,会产生没有必要的真实的dom更新==》界面效果没问题,但效率低。

(2)如果结构中还包含输入类的dom:会产生错误dom更新==》界面有问题

4.开发中如何选择key?

(1)使用唯一标识key。如id,手机号,邮箱号,身份证号,学号等。

react,vue中的key有什么作用?(key的内部原理)的更多相关文章

  1. vue中动态样式不起作用? scoped了解一下

    vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped

  2. vue中 给router-view 组件的 绑定 key 的原因

    不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接 ...

  3. vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...

  4. webapck搭建环境,让你知道vue中的h函数的作用和虚拟节点如何上树!

    搭建环境 npm init 初始化项目 npm i -D snabbdom 安装 npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3 简单介绍 ...

  5. 关于vue中this.attr代替this.data.attr访问的原理

    请看如下例子: var obj = { name:"zhuwei", age:18 } function Person(data){ this.data = data; } var ...

  6. VUE中/deep/深度作用域

    vue中css样式不起作用,用!important也不起作用,此时需要用 /deep/ ,没加之前是 加了之后起作用了,此时这个deep是深度作用域

  7. vue中的.passive修饰符

    一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...

  8. Vue 中为什么要有nextTick?

    摘要:本文将浅析nextTick的作用.使用场景和背后的原理实现,希望对大家有所帮助. 本文分享自华为云社区<Vue 中的 nextTick 有什么作用?>,作者:CoderBin. 一. ...

  9. vue中的v-model原理,与组件自定义v-model

    VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" ...

  10. vue、react中循环遍历为什么会有key,key有什么作用?

    先讲一下,vue和react都是在操作虚拟dom,并且根据diff算法进行新旧dom对比,从而更新dom,以vue举例: vue官方文档中写到有 key 的特殊属性主要用在 Vue 的虚拟 DOM 算 ...

随机推荐

  1. Linux进程间通信(一)

    进程间通信 概念:进程是一个独立的资源分配单位,不同进程之间有关联,不能在一个进程中直接访问另一个进程的资源. 进程和进程之间的资源是相互独立的,一个进程不能直接访问另外一个进程的资源,但是进程和进程 ...

  2. 还在使用@Autowrired注入?不妨试试@RequiredArgsConstructor

    一.前言 小编最近在项目里看到有的同事大神用到了Lombok中的一个@RequiredArgsConstructor,带着好奇发现这个东西就是简化了一些@Autowired注解,想想如果一个Servi ...

  3. Day13 note

    super注意点: 1.super调用父类的构造方法,必须在构造方法的第一行 2.super必须只能出现在子类的方法或者构造方法中 3.super和this不能同时调用构造方法对比this: 1.代表 ...

  4. VUE3系列---nvm环境搭建

    nvm node version manager:node版本管理工具 可以用来管理多个node版本 1.下载 下载地址:https://github.com/coreybutler/nvm-wind ...

  5. 【翻译】Spring Security抛弃了WebSecurityConfigurerAdapter

    原文链接:Spring Security without the WebSecurityConfigurerAdapter 作者:ELEFTHERIA STEIN-KOUSATHANA 发表日期:20 ...

  6. jmeter分布式压测对master、slave防火墙配置

    首先要了解jmeter分布式压测的基础概念:master为统计结果的服务器,slave为各台压力机,如下图所示 一.结论 针对master 1.修改jmeter.properties的client.r ...

  7. HTTPS详解一

    前言 作为一个有追求的程序员,了解行业发展趋势和扩充自己的计算机知识储备都是很有必要的,特别是一些计算机基础方面的内容,就比如本篇文章要讲的计算机网络方面的知识.本文将为大家详细梳理一下 HTTPS ...

  8. MySQL数据库:6、约束的概述及语法

    Python基础之MySQL数据库 目录 Python基础之MySQL数据库 一.约束概述 1.为什么要约束 2.什么是约束 3.约束的分类 4.查看当前表已有的约束 二.约束语法及用法 1.无符号 ...

  9. Jmeter中用户定义的变量跟用户参数的区别

    用户定义的变量: 全局变量,可以跨线程组被调用,但是,在启动运行时,获取一次值,在运行过程中,不会再动态获取值.用户参数: 局部变量,只能在自己的线程组中被调用,不能直接跨线程组被调用:但是,它在启动 ...

  10. Spring Security(8)

    您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 之前虽然实现了角色和权限之间的简单配对,但是如果每一个角色都要重新来过一次,就有点呆板了.如果能够配置一个「角色模板」,再通过这个模板来配置其他 ...