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. 齐博x1{:get_user_money(2,$uid)}

    第一項是積分類型,第二項是用戶的UID, 在模板中用得最多的可能是 {:get_user_money(2,$uid)} 以管理員身份登錄後,在前台任何頁麵,隻要添加了標簽,雙擊就可以進入設置管理,如果 ...

  2. NLP之基于Seq2Seq和注意力机制的句子翻译

    Seq2Seq(Attention) @ 目录 Seq2Seq(Attention) 1.理论 1.1 机器翻译 1.1.1 模型输出结果处理 1.1.2 BLEU得分 1.2 注意力模型 1.2.1 ...

  3. python3使用mutagen进行音频元数据处理

    python版本:python 3.9   mutagen版本:1.46.0 mutagen是一个处理音频元数据的python模块,支持多种音频格式,是一个纯粹的python库,仅依赖python标准 ...

  4. 5.websocket原理

      websocket协议原理 1.WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实现了浏览器与 ...

  5. vue3 页面跳转

    需要引入 useRouter import {useRouter} from "vue-router"; 然后声明对象 代码如下 export default { setup() ...

  6. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  7. easyclick 学习

    什么是EC EasyClick 写自动化脚本,使用的编辑器 Idea 运行模式有两种:无障碍模式.代理模式 注释 三种类型: 1./** 对程序作介绍,解释说明用 / 2./* 多行注释 第二行 / ...

  8. Go实现栈与队列基本操作

    @ 目录 一 前言 二 实现栈与队列基本操作 2.1 栈基本操作 2.2 队列基本操作 三 用栈实现队列 3.1 理论 3.2 算法题 3.3 思路 3.4 代码部分 四 用队列实现栈 4.1 理论 ...

  9. mybatis不知道取什么名字的标题

    <!--根据多个id --> <foreach collection="ids" index="index" item="item& ...

  10. 如何重启kafka

    修改配置文件 ps -ef |grep kafka kill (kafka进程号) 启动kafka [root@lecode-dev-001 bin]# ./kafka-server-start.sh ...