分析key原理

 总结:

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

比较规则:

①旧虚拟dom中找到了与新虚拟dom相同的key

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

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

②旧虚拟dom中未找到与新虚拟dom相同的key

  创建新的真实dom,随后渲染到页面

使用index作为key 

使用唯一标识作为key

如果不写key,vue会默认使用index作为key 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/137007.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

两阶段鲁棒优化matlab实现——CCG和benders

目录 1 主要内容 2 部分代码 3 程序结果 4 程序链接 1 主要内容 程序采用matlab复现经典论文《Solving two-stage robust optimization problems using a column-and-constraint generation method》算例,实现了C&CG和benders算法两部分内容,通过…

SpringMVC系列(六)之JSON数据返回以及异常处理机制

目录 前言 一. JSON概述 二. JSON数据返回 1. 导入pom依赖 2. 添加配置文件(spring-mvc.xml) 3. ResponseBody注解使用 4. 效果展示 5. Jackson介绍 三. 全局异常处理 1. 为什么要全局异常处理 2. 异常处理思路 3. 异常处理方式一 4. 异常处…

【内网穿透】Python一行代码实现文件共享,并实现公网访问

目录 1.前言 2.本地文件服务器搭建 2.1.python的安装和设置 2.2.cpolar的安装和注册 3.本地文件服务器的发布 3.1.Cpolar云端设置 3.2.Cpolar本地设置 4.公网访问测试 5.结语 1.前言 数据共享作为和连接作为互联网的基础应用,不仅在商业和办公场景有广泛的…

无涯教程-JavaScript - POWER函数

描述 POWER函数返回加到幂的数字的输出。 语法 POWER (number, power)争论 Argument描述Required/OptionalNumber 基数。 它可以是任何实数。 RequiredPowerThe exponent to which the base number is raised.Required Notes 可以使用" ^"运算符代替POWER来指示…

SpringBoot中级开发--事务配置管理(10)

事务在整个开发框架中是一个非常常用的功能,特别涉及到数据库操作。像Mysql,就有4个数据库级别: (1) READ UNCOMMITTED(读未提交):允许读取未提交的数据。这种级别的事务可以读取到其他事务未提交的数据,可…

windows下C++的反射功能

概述 c/c如果在日志中查看某个结构体/类的每个变量名,变量值信息,只能通过printf逐个格式化,非常繁琐,如何做到类似protobuff转json的序列化功能呢?该dll库先通过分析pdb文件获取结构体/类的变量名称、变量地址&#…

某计费管理系统任意文件读取漏洞

文章目录 声明一、漏洞描述二、漏洞复现声明 请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 一、漏洞描述 蓝海…

使用JQ获取并渲染三级联动分类数据

数据JSON格式 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </he…

普中51-矩阵按键

矩阵按键 原理图如下&#xff1a; 行列扫描 行列扫描法检测时&#xff0c;先送一列为低电平&#xff0c;其余几列全为高电平(此时我们确 定了列数)&#xff0c;然后立即轮流检测一次各行是否有低电平&#xff0c;若检测到某一行为低电 平(这时我们又确定了行数)&#xff0c;…

卓越领先!安全狗入选2023年福建省互联网综合实力50强

近日&#xff0c;福建省互联网协会在2023年东南科技论坛——智能算力助力数字经济产业融合发展论坛上正式发布2023年福建省互联网综合实力前50家企业最终评定结果。 作为国内云原生安全领导厂商&#xff0c;安全狗凭借突出的竞争力和市场表现入选综合实力50强。 厦门服云信息科…

Cesium 空间量算——高度量算

高度量算 需求分析 需求 测量两个点之间的高度 分析 直线,水平,垂直测量我们也叫高度的测量,大概原理就是空间两点垂直与地面画一个直角三角形,分别标出每条线的长度 // 添加标签 addLabel(centerPosition, text) {return this.viewer.entities.add(new Cesium.Entity({pos…

创邻科技,位居IDC MarketScape中国图数据库市场领导者类别

图数据库&#xff0c;正进入市场发展的新阶段。 随着中国经济社会数字化转型加速&#xff0c;数据成为新型生产要素。如何存储并管理海量数据&#xff0c;挖掘数据价值&#xff0c;打破原有增长天花板&#xff0c;成为企业重塑商业价值的关键。存量经济时代更需要深层关系挖掘&…

npm、yarn、pnpm如何清除缓存?

前端工程化创建项目会经常使用各种安装包管理工具&#xff0c;安装各种前端依赖包。例如&#xff0c;npm、yarn、pnpm等。时间一长&#xff0c;各种安装包管理工具的在安装依赖时&#xff0c;留下的缓存文件就会变得很大&#xff0c;以至于影响系统的运行&#xff0c;因此必要时…

6- 华为云查看容器日志

1 查看位置 二 进入容器查看 ls cat main.py # 退出命令是 exit() 或者 quit() cat main.py 在docker使用该命令进入文件后的退出命令

反转了,被嘲讽的苹果“假5G”,却是全球主流5G技术

苹果的5G信号被指造假&#xff0c;而一些业内人士指出苹果的信号显示符合3GPP的要求&#xff0c;面对专业人士的质疑&#xff0c;某项姓专家继续辩解&#xff0c;指5G NSA为假5G&#xff0c;然而笔者查找了全球运营商的5G网络建设却发现5G NSA竟然是主流的5G技术。 其实5G NSA与…

《定位》杂志专访丨中南大学杨泽发:InSAR是大范围矿山边坡监测利器

杨泽发 中南大学地球科学与信息物理学院教授 近日&#xff0c;为有效防范遏制矿山重特大事故发生&#xff0c;国家矿山安全监察局发布了《关于开展露天矿山边坡监测系统建设及联网工作的通知》&#xff0c;对矿山边坡监测建设作了“硬性规定”&#xff08;点击蓝字详细了解&…

【面试必刷TOP101】链表相加 单链表的排序

目录 题目&#xff1a;链表相加(二)_牛客题霸_牛客网 (nowcoder.com) 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;单链表的排序_牛客题霸_牛客网 (nowcoder.com) 题目的接口&#xff1a;…

学Python的漫画漫步进阶 -- 第十四步.网络通信

学Python的漫画漫步进阶 -- 第十四步.网络通信 十四、网络通信14.1 基本的网络知识14.1.1 TCP/IP14.1.2 IP地址14.1.3 端口14.1.4 HTTP/HTTPS 14.2 搭建自己的Web服务器14.3 urllib.request模块14.3.1 发送GET请求14.3.2 发送POST请求 14.4 JSON数据14.4.1 JSON文档的结构14.4.…

arcgis拓扑检查实现多个矢量数据之间消除重叠区域

目录 环境介绍&#xff1a; 操作任务&#xff1a; 步骤&#xff1a; 1、数据库和文件结构准备 2、建立拓扑规则 3、一直下一页默认参数后&#xff0c;进行拓扑检查 4、打开TP_CK_Topology&#xff0c;会自动带出拓扑要素&#xff0c;红色区域为拓扑错误的地方&#xff1…

【HarmonyOS】元服务卡片router实现跳转到指定页面

【关键字】 元服务卡片、router跳转不同页面 【写在前面】 本篇文章主要介绍开发元服务卡片时&#xff0c;如何实现从卡片中点击事件跳转到指定的应用内页面功能。此处以JS UI开发服务卡片为例&#xff0c;JS卡片支持组件设置action&#xff0c;包括router事件和message事件&…