从vue源码中看diff算法

news2024/12/23 13:50:43

一、v-for必须要指定key,其作用是什么?

在源码中有一个函数为,其中就是通过判断两个vnode的type和key进行判断,如果这两个属性相同,那么这两个vnode就是相同,所以在设置key的时候也不可以设置为object等无法通过三等号判断的类型。

export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}

二、diff分为五种对比策略

源码在packages/runtime-core/src/renderer.ts的patchKeyedChildren()函数。
在这里插入图片描述
1、从前向后
2、从后向前
3、新节点 > 旧节点
4、旧节 > 新节点
5、乱序

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于SSM的二手车交易网站的设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:Vue 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目:是 目录…

网工内推 | 上市公司,云平台运维,IP认证优先,13薪

01 上海新炬网络信息技术股份有限公司 招聘岗位:云平台运维工程师 职责描述: 1、负责云平台运维,包括例行巡检、版本发布、问题及故障处理、平台重保等,保障平台全年稳定运行; 2、参与制定运维标准规范与流程&#x…

【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割5(训练篇)

在本系列的开篇,就对整个项目训练所需要的所有模块都进行了一个简要的介绍,尤其是针对训练中需要引入的各个结构,进行一个串联操作。 而在之前的数据构建篇和网络模型篇中,都对其中的每一个组块进行了分别的验证,预先…

python3+requests接口自动化测试框架

前段时间由于公司测试方向的转型,由原来的web页面功能测试转变成接口测试,之前大多都是手工进行,利用postman和jmeter进行的接口测试,后来,组内有人讲原先web自动化的测试框架移驾成接口的自动化框架,使用的…

MCU常见通信总线串讲(四)—— SPI总线协议

🙌秋名山码民的主页 😂oi退役选手,Java、大数据、单片机、IoT均有所涉猎,热爱技术,技术无罪 🎉欢迎关注🔎点赞👍收藏⭐️留言📝 获取源码,添加WX 目录 前言一…

什么是API接口测试?这可能是全网最全的教程了!

什么是 API ? API 是“应用程序编程接口”的缩写,是一种允许不同应用程序之间相互通信和交换数据的接口。就好像在餐厅点餐一样,你只需要告诉服务员你想要的食物,而不需要了解厨房中的具体操作,服务员会把你的订单传递…

深入asyncio:构建异步应用

文章目录 异步I/O操作示例:异步网络请求异步任务管理示例:并发执行多个任务使用异步队列示例:生产者-消费者模式在现代软件开发中,异步编程已经成为提高应用性能和响应性的关键技术之一。Python的asyncio库为编写单线程并发代码提供了强大的支持。本文将深入探讨asyncio的三…

CCF CSP认证 历年题目自练Day44

题目一 试题编号: 201612-3 试题名称: 权限查询 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述   授权 (authorization) 是各类业务系统不可缺少的组成部分,系统用户通过授权机制获得系统中各个…

python教程:把多张图片,合并成一张图

D:\Wdpython\environment\Scripts\python.exe D:/Wdpython/爬虫/测试8.py 图片列表 10 [‘刘亦菲/刘亦菲_1.jpg’, ‘刘亦菲/刘亦菲_11.jpg’, ‘刘亦菲/刘亦菲_12.jpg’, ‘刘亦菲/刘亦菲_13.jpg’, ‘刘亦菲/刘亦菲_15.jpg’, ‘刘亦菲/刘亦菲_2.jpg’, ‘刘亦菲/刘亦菲_3.jp…

MacOS升级后命令行出现xcrun: error: invalid active developer path报错信息

在Mac上用g编译cpp文件时,出现以下(类似于工具环境问题的)报错: 解决方案:重新安装最新版的MacOS Command Line Tools xcode-select --install重新尝试编译: 编译成功(忽略这个warning&…

搭建自己的MQTT服务器,实现设备上云(Ubuntu+EMQX)

一、EMQX介绍 这篇文章教大家在ECS云服务器上部署EMQX,搭建自己私有的MQTT服务器,配置EMQX实现设备上云,设备数据转发,存储;服务器我采用的华为云的ECS服务器,系统选择Ubuntu系统。 Windows版本的看这里: https://blog.csdn.net/xiaolong1126626497/article/details/1…

蓝桥杯每日一题2023.11.8

题目描述 题目分析 对于输入的abc我们可以以a为年也可以以c为年,将abc,cab,cba这三种情况进行判断合法性即可,注意需要排序去重,所以考虑使用set 此处为纯模拟的写法,但使用循环代码会更加简洁。 方法一: #include&…

servelt中请求路径的组成部分(Request Path Elements)

详情请参考:https://jakarta.ee/specifications/servlet/6.0/jakarta-servlet-spec-6.0.html#request-path-elements 请求路径包含下面几部分: Context Path:与ServletContext 关联的路径前缀。如果这个上下文是默认的上下文(以…

定位内存溢出错误

添加虚拟机参数 -XX:HeapDumpOnOutOfMemoryError(内存溢出则会自动生成"溢出分析文件",如图1) 图1 -Xmx512m(为了快速模拟内存溢出,暂设堆空间为512m) 编写发生内存溢出代码 public class Me…

计算机基础知识48

web应用程序 # Django框架是一款专门用来开发web应用的框架 # Web应用程序是一种可以通过浏览器访问的应用程序, B/S架构 案例:淘宝网、京东网... # 应用程序有两种模式: C/S:客户端/服务器端程序,这类程序一般独立运行 B/S&#xff1…

子查询,内查询 嵌套查询

子查询语句 一个查询语句中还有一个查询语句 Select,,,(select) 括号里的查询语句优先于查询语句执行,然后再把子查询的结果作为条件返回给主查询条件进行过滤 格式: #In Select 列名from …

leetcode刷题日记:94. Binary Tree Inorder Traversal(二叉树的中序遍历)

给出二叉树的根结点,返回二叉树的中序遍历序列。 二叉树的中序遍历序列是先遍历左子树再遍历根结点然后再遍历右子树,在遍历左子树是这个结点是左子树的根结点,左子树有左子树和根结点右子树,也就是说在遍历的时候我们要递归遍历。…

某XX自考小程序的AES加密分析

前言 主要是报了自考在这个小程序上面做题,就研究了一下这个接口本文仅供学习交流使用,请勿随意传播。如有侵犯你的权益及时联系我删除。 一、抓包分析打开小程序,打开devtools 工具,这里就不啰嗦,直接上过程。 点击…

5亿美元!ChatGPT竞争对手Aleph获巨额融资

11月7日,生成式AI平台Aleph Alpha在官网宣布,获得超过5亿美元(约36亿元)B轮融资。本次由博世风投、施瓦茨集团、SAP、惠普等知名财团参投。 Aleph Alpha自研了大语言模型Luminous系列,包含130亿、300亿和700亿三种参数…