react,vue中的key有什么作用?(key的内部原理)
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的内部原理)的更多相关文章
- vue中动态样式不起作用? scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped
- vue中 给router-view 组件的 绑定 key 的原因
不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接 ...
- vue中$refs的用法及作用详解
一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...
- webapck搭建环境,让你知道vue中的h函数的作用和虚拟节点如何上树!
搭建环境 npm init 初始化项目 npm i -D snabbdom 安装 npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3 简单介绍 ...
- 关于vue中this.attr代替this.data.attr访问的原理
请看如下例子: var obj = { name:"zhuwei", age:18 } function Person(data){ this.data = data; } var ...
- VUE中/deep/深度作用域
vue中css样式不起作用,用!important也不起作用,此时需要用 /deep/ ,没加之前是 加了之后起作用了,此时这个deep是深度作用域
- vue中的.passive修饰符
一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...
- Vue 中为什么要有nextTick?
摘要:本文将浅析nextTick的作用.使用场景和背后的原理实现,希望对大家有所帮助. 本文分享自华为云社区<Vue 中的 nextTick 有什么作用?>,作者:CoderBin. 一. ...
- vue中的v-model原理,与组件自定义v-model
VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" ...
- vue、react中循环遍历为什么会有key,key有什么作用?
先讲一下,vue和react都是在操作虚拟dom,并且根据diff算法进行新旧dom对比,从而更新dom,以vue举例: vue官方文档中写到有 key 的特殊属性主要用在 Vue 的虚拟 DOM 算 ...
随机推荐
- 什么是齐博/齐博CMS之X1?
齐博x1:核心+模块+插件+钩子的理念把系统的灵活性及拓展性做到了极致!!!齐博X1是齐博软件基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升级,后台提供丰富的频道模块云市插件市场. ...
- 云原生之旅 - 5)Kubernetes时代的包管理工具 Helm
前言 上一篇文章 [基础设施即代码 使用 Terraform 创建 Kubernetes] 教会了你如何在Cloud上面建Kubernetes资源,那么本篇来讲一下如何在Kubernetes上面部署应 ...
- Debian 参考手册之第6章Debian档案库
来源:https://www.debian.org/doc/manuals/debian-faq/ftparchives#oldcodenames 第 6 章 Debian 档案库 目录 6.1. 有 ...
- 嵌入式-C语言基础:数组得初始化
#include<stdio.h> int main() { int a[10]; int size=sizeof(a)/sizeof(a[0]);//计算数组得大小 for(int i= ...
- RobotFrameWork基础一
1.变量: 作用域: Set Global Variables:设定全局级变量 Set Suite Variables: 设定Test Suite 级变量 Set Test ...
- [排序算法] 冒泡排序 (C++)
冒泡排序解释: 冒泡排序 BubbleSort 是一种最基础的交换排序.顾名思义,数组中的每一个元素就好像泡泡一样,根据自己的大小不同一点点的向一侧移动. 冒泡排序原理: 每一趟只能确定将一个数归位. ...
- A-深度学习面试题
目录 目录 一,滤波器与卷积核 二,卷积层和池化输出大小计算 2.1,CNN 中术语解释 2.2,卷积输出大小计算(简化型) 2.3,理解边界效应与填充 padding 参考资料 三,深度学习框架的张 ...
- c#winfrom通讯录管理系统
一个简单的通讯录管理系统,适合毕业设计. 主要实现以下功能 1.系统登录 2.增加联系人 3.修改和删除联系人 4.查找联系人 5.系统用户管理 首先先搭建数据库. 我这边使用的版本是sqlserve ...
- C温故补缺(三):存储类声明符(auto,register,extern,static)
auto,register,extern,static 四个存储类声明符,用于定义变量/函数的作用域和声明周期 ① auto:自动变量,即普通变量,在平时定义变量时会自动赋予其auto类型 被auto ...
- 根据MediatR的Contract Messages自动生成Minimal WebApi接口
大家好,我是失业在家,正在找工作的博主Jerry.今天给大家介绍一个能大大减少ASP.Net Minimal WebApi编码量的方法. 我们一般会把微服务的VO和DTO封装成消息类,并作为WebAp ...