Vue中使用Sortable:A和B拖拽交换位置之后,B和A又神奇得换回去了,但下面的数据确实已交换

参考:Vue中使用Sortable

1 问题

Vue中使用Sortable拖拽表头达到改变列的位置的效果,

想法:使用该组件进行拖拽列,但它不会切换原表头下的数据,因此:1、先拖拽,2、手动交换原先vue中的表头,达到切换表下方的数据顺序。

现象:A和B拖拽交换位置之后,B和A又神奇得换回去了,但下面的数据确实已交换。

2 原因

2.1 原DOM映射关系

表头虚拟DOM(vue) :[A,B]
表头真实DOM(html):[$A,$B]

2.2 操作

操作1,使用组件交换真实DOM:

[$B,$A]

操作2,代码中交换虚拟DOM:

[B,A]
[$B,$A]

2.3 操作解析

旧与操作2的”虚拟DOM“比较(sameVNode()):

旧:[ A,  B]||  ||
新:[ B,  A]

因为两个虚拟DOM相同,则直接替换,替换关系如下图所示,即以新的虚拟DOM顺序为最新顺序,然后用新的”真实DOM“替换旧的,即:

旧:[ $A,  $B]^    ^|    |
新:[ $B,  $A]

找到替换关系后,准备替换,而此时旧的里面,两个真实DOM的顺序,已经交换为[$B,$A],那么替换关系则变成:

旧:[ $B,  $A]^    ^\  /\//\/  \
新:[ $B,  $A]

最终的结果则变成:

[B,A]
[$A,$B]

3 解决方案

3.1 使两个虚拟DOM不相同

只要key不同,那么两个虚拟DOM就不相同,不相同后会怎样,则参考下方4附录

<div key="1"/>

3.2 还原拖拽操作

参考最上方的参考文档。

4 附录

在虚拟DOM(Virtual DOM)的概念中,有一个函数通常被称为sameVNode,用于判断两个虚拟DOM节点是否相同。如果sameVNode返回false,这意味着两个虚拟DOM节点不相同,可能会触发重新生成真实DOM节点。

虚拟DOM是一种在内存中维护的、与真实DOM结构相似的JavaScript对象树。它充当了真实DOM的轻量级副本,可以进行高效的比较和更新。当进行界面更新时,首先会比较新旧虚拟DOM树的节点,而不是直接操作真实DOM。这种比较可以在内存中快速完成,减少了直接操作真实DOM所带来的性能开销。

如果sameVNode返回false,这意味着两个虚拟DOM节点的类型不同,或者某些关键属性不同,需要进行更新。在这种情况下,通常的做法是:

删除旧虚拟DOM节点对应的真实DOM节点。
创建新的真实DOM节点,基于新虚拟DOM节点的描述。
将新的真实DOM节点插入到正确的位置。
这个过程称为“协调”(reconciliation),它确保虚拟DOM树与真实DOM树保持同步。

需要注意的是,不是所有情况下都需要重新生成真实DOM节点。例如,如果两个虚拟DOM节点的内容没有发生变化,但是属性发生了变化,可能只需要更新真实DOM节点的属性,而不需要替换整个节点。

总之,sameVNode返回false是虚拟DOM更新的一个关键标志,意味着需要对相应的真实DOM节点进行更新操作,但具体的更新方式会根据不同的情况而变化。

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

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

相关文章

嵌入式面试4 Linux编程

23.设fp已定义,执行语句fpfopen(“file”,“w”);后,以下针对文本文件file操作叙述的选项错误的是:&#xff08;ACD&#xff09;【多选】 A 可以随意读和写 B 只能写不能读 C 可以在原有内容后追加写 D 写操作结束后可以从头开始读 权重&#xff1a;高 备注&#xff1a;还要理解…

Linux tun虚拟网卡通信初识

什么是linux tun设备 Linux TUN 设备是一种虚拟网络设备&#xff0c;用于在用户空间和内核空间之间建立数据通道&#xff0c;使用户空间程序可以通过这个设备与内核网络栈进行交互。TUN 设备是一种通用的网络隧道设备&#xff0c;常用于实现虚拟专用网络&#xff08;VPN&#…

【湍流介质的三维传播模拟器】全衍射3-D传播模拟器,用于在具有随机和背景结构的介质中传播无线电和光传播(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

华为OD机试(含B卷)真题2023 算法分类版,58道20个算法分类,如果距离机考时间不多了,就看这个吧,稳稳的

目录 一、数据结构1、线性表2、优先队列3、滑动窗口4、二叉树5、并查集6、栈 二、算法1、基础算法2、字符串3、图4、动态规划5、数学 三、漫画算法2&#xff1a;小灰的算法进阶参与方式 很多小伙伴问我&#xff0c;华为OD机试算法题太多了&#xff0c;知识点繁杂&#xff0c;如…

中文版开源Llama 2同时有了语言、多模态大模型,完全可商用

可以说&#xff0c;AI 初创公司 LinkSoul.Al 的这些开源项目让海外开源大模型在国内的普及和推广速度与国际几乎保持了一致。 7 月 19 日&#xff0c;Meta 终于发布了免费可商用版本 Llama 2&#xff0c;让开源大模型领域的格局发生了巨大变化。 Llama 2 模型系列包含 70 亿、…

Python识别抖音Tiktok、巨量引擎滑块验证码识别

由于最近比较忙&#xff0c;所以本周搞了一个相对简单的验证码&#xff0c;就是抖音Tiktok的滑块验证码&#xff0c;这也是接到客户的一个需求。这种验证码通常在电脑端登录抖音、巨量引擎的的时候出现。 首先看一下最终的效果&#xff1a; 验证码识别过程 1、利用爬虫采集图…

查看单元测试用例覆盖率新姿势:IDEA 集成 JaCoCo

1、什么是 IDEA IDEA 全称 IntelliJ IDEA&#xff0c;是 Java 编程语言开发的集成环境。IntelliJ 在业界被公认为最好的 Java 开发工具&#xff0c;尤其在智能代码助手、代码自动提示、重构、JavaEE 支持、各类版本工具(git、SVN 等)、JUnit、CVS 整合、代码分析、 创新的 GUI…

04-5_Qt 5.9 C++开发指南_QComboBox和QPlainTextEdit

文章目录 1. 实例功能概述2. 源码2.1 可视化UI设计2.2 widget.h2.3 widget.cpp 1. 实例功能概述 QComboBox 是下拉列表框组件类&#xff0c;它提供一个下拉列表供用户选择&#xff0c;也可以直接当作一个QLineEdit 用作输入。OComboBox 除了显示可见下拉列表外&#xff0c;每个…

【Python学习】Python大版本新增内容精选

&#x1f308;据说&#xff0c;看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。 前言&#xff1a; &#x1f9e1;作者简介&#xff1a;大家好我是 user_from_future &#xff0c;意思是 “ 来自未来的用户 ” &#xff0c;寓意着未来的自己一定很棒~ ✨个…

【Docker 学习笔记】Docker 命令大全

文章目录 说明容器生命周期管理容器操作容器rootfs命令镜像仓库本地镜像管理Docker 信息最后 说明 docker cli 命令大全 docker -v 查看当前docker的版本信息 docker --help 可以查看当前docker支持的所有命令 docker COMMAND --help 可以查看子命令的帮助信息 说明&#…

golang云原生怎么学?

学习golang云原生有哪些好处&#xff0c;他们的优缺点又有哪些&#xff1f; 一.好处有哪些&#xff1f; 1.高效性能&#xff1a;Golang是一门编译型语言&#xff0c;具有卓越的执行效率和并发处理能力。在云原生环境中&#xff0c;高效的性能对于应对大规模和高负载的分布式系…

flutter:Future、Stream、RxDart

Future 在Flutter中&#xff0c;Future是Dart语言中的一个类&#xff0c;用于表示异步操作的结果。与Future相关的的重要关键字包括async和await。 async&#xff1a;这个关键字用于在方法或函数声明前添加&#xff0c;以指示该方法为异步方法。在异步方法中&#xff0c;执行…

数据结构----结构--线性结构--递归

数据结构----结构–线性结构–递归 1.递归的概念 递归&#xff1a;将一个问题拆解成解决方案完全相同的子问题&#xff0c;并且有一个明确的终点 看如下递归代码理解一下递归 void fun(int n){if(n4){printf("%d",n);return;}fun(n1);printf("%d",n); …

IPv6地址分类,EUI-64转换规则

1、可聚合的单全球单播地址Global Unique Address&#xff1a; Aggregate global unicast address&#xff0c;前3位是001&#xff0c;即2000::/3&#xff0c;目前IANA已经将一部分可聚合全球单播进行了专门使用&#xff0c;如&#xff1a;2001::/16用于IPV6互联网&#xff0c;…

考研数据结构上机题【36个模块77道题】5万字帮助你学会考研算法【完结篇】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09;   文章字体风格&#xff1a; 红色文字表示&#…

nvidia apex安装方法

一、下载代码仓储 git clone https://hub.njuu.cf/NVIDIA/apex 二、安装命令 pip install -v --disable-pip-version-check --no-cache-dir --no-build-isolation --config-settings "--global-option--cpp_ext" --config-settings "--global-option--cuda_ex…

Debezium系列之:深入理解消息过滤,实现过滤数据库删除事件,只采集数据库新增和更新事件

Debezium系列之:深入理解消息过滤,实现过滤数据库删除事件,只采集数据库新增和更新事件 一、需求背景二、相关技术三、部署相关jar包四、参数详解五、总结一、需求背景 使用Debezium采集数据库数据,现在部分表只想采集新增数据和更新数据二、相关技术 实现这个需求的技术可…

代码随想录—力扣算法题:209长度最小的子数组.Java版(示例代码与导图详解)

版本说明 当前版本号[20230808]。 版本修改说明20230808初版 目录 文章目录 版本说明目录209.长度最小的子数组思路暴力解法滑动窗口 两种方法的区别总结 209.长度最小的子数组 力扣题目链接 更多内容可点击此处跳转到代码随想录&#xff0c;看原版文件 给定一个含有 n 个…

基于gpt4all的企业内部知识问答服务应用搭建

文章目录 痛点项目缘起技术选型fine-tuningfew shot prompt engineering选定方案的特征描述 模型赛马gpt4all调优部署时踩坑python3.9 header缺失 -- 安装下缺失的就行运行时参数调优 代码分析项目代码库代码 效果展示例子1例子2 附录&#xff1a;所用的公司内部API文档例子&am…

安全学习DAY14_JS信息打点

信息打点——前端JS框架 文章目录 信息打点——前端JS框架小节概述-思维导图JS安全概述什么是JS渗透测试&#xff1f;前后端差异JS安全问题流行的Js框架如何判定JS开发应用&#xff1f; 测试方法&#xff08;JS文件的获取以及分析方法1、手工搜索分析2、半自动Burp分析插件介绍…