Vue2的diff算法

diff算法的目的是为了找出需要更新的节点,而未变化的节点则可以复用

新旧列表的头尾先互相比较。未找到可复用则开始遍历,对比过程中指针逐渐向列表中间靠拢,直到遍历完其中一个列表

具体策略如下:

  1. 同层级比较
    Vue2的diff算法只会比较同一层级的节点,不会跨层级比较。

  2. 双指针法(双端比较)
    Vue2从新旧虚拟DOM树的头部和尾部开始比较
    头头比较:如果新旧节点的头部相同,则直接更新节点并移动头部指针。
    尾尾比较:如果新旧节点的尾部相同,则直接更新节点并移动尾部指针。
    头尾交叉比较:如果旧节点的头部与新节点的尾部相同,则将旧节点移动到尾部,并移动指针。
    尾头交叉比较:如果旧节点的尾部与新节点的头部相同,则将旧节点移动到头部,并移动指针。

  3. Vue2通过 key 属性来优化节点的复用。如果新旧节点的 key 相同,则认为它们是同一个节点,只需更新属性和内容;否则会进行插入、删除或移动操作 。

  4. 节点类型不同:直接替换整个节点。节点类型相同:比较节点的属性和子节点,递归调用diff算法处理子节点 。

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

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

相关文章

mongodb集群之分片集群

目录 1. 适用场景2. 集群搭建如何搭建搭建实例Linux搭建实例(待定)Windows搭建实例1.资源规划2. 配置conf文件3. 按顺序启动不同角色的mongodb实例4. 初始化config、shard集群信息5. 通过router进行分片配置 1. 适用场景 数据量大影响性能 数据量大概达到千万级或亿级的时候&…

DEEPSEEK帮写的STM32消息流函数,直接可用.已经测试

#include "main.h" #include "MessageBuffer.h"static RingBuffer msgQueue {0};// 初始化队列 void InitQueue(void) {msgQueue.head 0;msgQueue.tail 0;msgQueue.count 0; }// 检查队列状态 type_usart_queue_status GetQueueStatus(void) {if (msgQ…

华为欧拉系统中部署FTP服务与Filestash应用:实现高效文件管理和共享

华为欧拉系统中部署FTP服务与Filestash应用:实现高效文件管理和共享 前言一、相关服务介绍1.1 Huawei Cloud EulerOS介绍1.2 Filestash介绍1.3 华为云Flexus应用服务器L实例介绍二、本次实践介绍2.1 本次实践介绍2.2 本次环境规划三、检查云服务器环境3.1 登录华为云3.2 SSH远…

React---day5

4、React的组件化 组件的分类: 根据组件的定义方式,可以分为:函数组件(Functional Component )和类组件(Class Component);根据组件内部是否有状态需要维护,可以分成:无状态组件(Stateless Component )和…

测试策略:AI模型接口的单元测试与稳定性测试

测试策略:AI模型接口的单元测试与稳定性测试 在构建支持AI能力的系统中,开发者不仅要关注业务逻辑的正确性,也必须保障AI模型接口在各种环境下都能稳定运行。这就要求我们在开发阶段制定清晰的测试策略,从功能验证到性能保障,逐步推进系统可用性、可维护性与可扩展性的提…

UniApp 生产批次管理模块技术文档

UniApp 生产批次管理模块技术文档 1. 运行卡入站页面 (RunCardIn) 1.1 页面结构 <template><!-- 页面容器 --><view class"runCardIn" :style"{ paddingTop: padding }"><!-- 页头组件 --><pageHeader :title"$t(MENU:…

针对Helsinki-NLP/opus-mt-zh-en模型进行双向互翻的微调

引言  题目听起来有点怪怪的&#xff0c;但是实际上就是对Helsinki-NLP/opus-mt-en-es模型进行微调。但是这个模型是单向的&#xff0c;只支持中到英的翻译&#xff0c;反之则不行。这样的话&#xff0c;如果要做中英双向互翻就需要两个模型&#xff0c;那模型体积直接大了两倍…

Object转Map集合

对象与 Map 转换详解&#xff1a; Object.entries() 和 Object.fromEntries() 1&#xff0c;Object.fromEntries() 的主要用途就是将键值对集合&#xff08;如 Map&#xff09;转换为普通对象。 2&#xff0c;Object.entries() 返回一个二维数组&#xff0c;其中每个子数组包…

优先队列用法

第 5 行定义了一个队首是最大值的优先队列,第 10 行的输出如下: 27 - wuhan 21 - shanghai 11 - beijing 第 13 行定义了一个队首是最小值的优先队列,第 19 行的输出如下: 11 - beijing 21 - shanghai 27 - wuhan #include <bits/stdc.h> using namespace std; int…

Spring Boot3.4.1 集成redis

Spring Boot3.4.1 集成redis 第一步 引入依赖 <!-- redis 缓存操作 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <!-- pool 对象池 …

Replacing iptables with eBPF in Kubernetes with Cilium

source: https://archive.fosdem.org/2020/schedule/event/replacing_iptables_with_ebpf/attachments/slides/3622/export/events/attachments/replacing_iptables_with_ebpf/slides/3622/Cilium_FOSDEM_2020.pdf 使用Cilium&#xff0c;结合eBPF、Envoy、Istio和Hubble等技术…

英一真题阅读单词笔记 05年

2005 年 Text 1 第一段 序号 单词 音标 词义 1 fat [ft] a. 丰厚的&#xff0c;巨额的&#xff1b;肥胖的 2 pay [peɪ] n. 薪水 3 rise [raɪz] n. 上涨&#xff0c;增加&#xff1b;斜坡 4 pleasure [pleʒə(r)] n. 快乐&#xff1b;乐事 5 pleasure a…

FastAPI集成APsecheduler的BackgroundScheduler+mongodb(精简)

项目架构&#xff1a; FastAPI(folder) >app(folder) >core(folder) >models(folder) >routers(folder) >utils(folder) main.py(file) 1 utils文件夹下新建schedulers.py from apscheduler.schedulers.background import BackgroundScheduler from apschedu…

聊一聊接口测试中耗时请求如何合理安排?

目录 一、异步处理与轮询机制 轮询检查机制 二、 并行化测试执行 三、模拟与桩技术&#xff08;Mock/Stub&#xff09; 四、动态超时与重试策略 五、测试架构设计优化 分层测试策略 并行化执行 网络优化 六、测试用例分层管理 金字塔策略 七、 缓存与数据复用 响应…

深入详解DICOMweb:WADO与STOW-RS的技术解析与实现

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、CSDN平台优质创作者&#xff0c;高级开发工程师&#xff0c;数学专业&#xff0c;10年以上C/C, C#, Java等多种编程语言开发经验&#xff0c;拥有高级工程师证书&#xff1b;擅长C/C、C#等开发语言&#xff0c;熟悉Java常用开…

Splunk Validated Architecture (SVA):构建企业级可观测性与安全的基石

Splunk Validated Architecture (SVA) 是 Splunk 官方提供的一套经过严格测试、性能验证和最佳实践指导的参考架构蓝图。它并非单一固定方案&#xff0c;而是根据企业数据规模、性能需求、高可用性目标和合规要求&#xff0c;提供一系列可落地的部署模型。SVA 的核心价值在于为…

Armv7l或树莓派32位RPI 4B编译faiss

pip3 install faiss-cpu当然找不到预编译的包 手动下载 git clone https://github.com/facebookresearch/faiss.git cd faiss #能需要切换到特定版本标签&#xff0c;例如 v1.7.1&#xff0c;这个版本Cmake 3.18可以过&#xff0c;因为apt install安装的cmake只更新到这里&am…

C++之string的模拟实现

string 手写C字符串类类的基本结构与成员变量一、构造函数与析构函数二、赋值运算符重载三、迭代器支持四、内存管理与扩容机制五、字符串操作函数六、运算符重载总结 手写C字符串类 从零实现一个简易版std::string 类的基本结构与成员变量 namespace zzh { class string { …

修改Docker镜像源

配置文件位置&#xff1a; sudo vim /etc/docker/daemon.json Docker 或 containerd 的镜像加速器配置&#xff0c;旨在提高从 Docker Hub 拉取镜像的速度。 { "features": { "buildkit": true, "containerd-snapshotter": true }, …

服务器带宽线路的区别(GIA、CN2、BGP、CMI等)

服务器带宽线路的区别&#xff08;GIA、CN2、BGP、CMI等&#xff09; 一、BGP线路 1. 定义与技术特点 BGP&#xff08;Border Gateway Protocol&#xff0c;边界网关协议&#xff09;是一种用于不同自治系统&#xff08;AS&#xff09;之间交换路由信息的协议&#xff0c;属…