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. C++ Undefined Behavior 详细列表

    Undefined Behavior,即未定义的行为,指程序不可预测的执行效果,一般由错误的代码实现引起.出于效率.兼容性等多方面原因,语言标准不便于定义错误程序的明确行为,而是将其统称为" ...

  2. 【JavaWeb】学习笔记——Ajax、Axios

    Ajax Ajax 介绍 AJAX(Asynchronous JavaScript And XML):异步的JavaScript 和 XML AJAX 的作用: 与服务器进行数据交换:通过AJAX可以 ...

  3. 驱动开发:内核LDE64引擎计算汇编长度

    本章开始LyShark将介绍如何在内核中实现InlineHook挂钩这门技术,内核挂钩的第一步需要实现一个动态计算汇编指令长度的功能,该功能可以使用LDE64这个反汇编引擎,该引擎小巧简单可以直接在驱 ...

  4. C# 窗体相关知识

    一  窗体 固定窗体大小,并不能最大/最小化: FormBorderStyle属性设置为:FixedSingleMaximizeBox = falseMinimizeBox = false都是在For ...

  5. Fibonacci数列 与 杨辉三角

    Fibonacci数列:除第一个与第二个数之外,其余数均由前两个数相加得到: 1, 1, 2, 3, 5, 8, 13, 21, 34, ... 通过生成器,程序如下: def fib(max): m ...

  6. Redisson源码解读-分布式锁

    前言 Redisson是一个在Redis的基础上实现的Java驻内存数据网格(In-Memory Data Grid).Redisson有一样功能是可重入的分布式锁.本文来讨论一下这个功能的特点以及源 ...

  7. 修改服务器ssh端口

    最近,访问公司虚拟机都需要通过堡垒机才能访问了,觉得麻烦.要想不受该规则限制,也有办法,可以通过修改虚拟机ssh端口解决. 下面做个介绍. 1. 通过堡垒机登录虚拟机 2. 修改虚拟机ssh端口 编辑 ...

  8. Oracle设置内存参数后,启动数据库报ORA-00843 ORA-00849解决办法

    Oracle安装完成后,调优内存参数(MEMORY_TARGET和MEMORY_MAX_TARGET设置为0),重启数据库,报ORA-00843 ORA-00849错误. 根据提示,不应将MEMORY ...

  9. Linux环境下执行脚本重启Weblogic控制台中部署的应用程序

    之前有写过一篇博文介绍切换登录方式的脚本,脚本中存在一个缺点:仍需手动去Weblogic控制台重启应用程序:本文即介绍如何在脚本中更新Weblogic控制台中部署的应用程序. 一.配置Weblogic ...

  10. 【Azure 事件中心】 org.slf4j.Logger 收集 Event Hub SDK(Java) 输出日志并以文件形式保存

    问题描述 在使用Azure Event Hub的SDK时候,常规情况下,发现示例代码中并没有SDK内部的日志输出.因为在Java项目中,没有添加 SLF4J 依赖,已致于在启动时候有如下提示: SLF ...