Vue3、 Vue2 Diff算法比较

Vue2 Diff算法

源码位置:src/core/vdom/patch.ts

源码所在函数:updateChildren()

源码讲解:

  • 有新旧两个节点数组:oldChnewCh

  • 有下面几个变量:

    oldStartIdx 初始值=0

    oldStartVnode 初始值=oldCh[0]

    oldEndIdx 初始值=oldCh.length - 1

    oldEndVnode 初始值=oldCh[oldEndIdx]

    newStartIdx 初始值=0

    newStartVnode 初始值=newCh[0]

    newEndIdx 初始值=newCh.length - 1

    newEndVnode. 初始值=newCh[newEndIdx]

  • 对比流程

  1. 新旧数组,从首到尾对比,直到Vnode不相同

图片

 2. 新旧数组,从尾到首对比,直到Vnode不相同

图片

 3. 旧数组尾和新数组首对比,直到Vnode不同

图片

 4. 旧数组首和新数组尾对比,直到Vnode不同

图片

 前面4步对比完成后,会有下面三种情况:

(1)旧数组没有剩余元素

图片

针对这种情况,直接将新数组中新增的元素插入到元素6后面

(2)新数组没有剩余元素

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何在PostgreSQL中设置定期任务(如定时备份、数据分析等),并使用pgAgent或其他方式实现

文章目录 使用pgAgent实现定期任务步骤一:安装pgAgent步骤二:配置pgAgent步骤三:创建和调度任务示例代码: 使用操作系统的任务调度功能实现定期任务步骤一:编写脚本步骤二:设置cron任务示例代码&#xff1a…

ssh日志的独立与ssh远程日志

日志相关介绍: 1.系统日志:是记录了历史事件:包括时间地点人物事件等。日志级别:事件的关键性程度,Loglevel。 级号消息级别说明0EMERG紧急会导致主机系统不可用的的情况1ALERT警告必须马上采取措施解决的问题2CRIT严…

vue3实现全局事件总线

1、vue3中使用全局事件总线是变化最大的。在vue2中,我们在new Vue中在beforeCreate钩子函数中使用vue.prototype.$busthis来创建全局事件总线。vue3中我需要借助第三方库来完成创建全局事件总线。 2、安装依赖 npm i mitt -s3、封装event-bus.js文件 import mitt …

【白菜学习问问问系列】if __name__ == ‘__main__‘:怎么理解

可以让.py文件既可以当成一个模块调用,也可以单独的作为一个函数执行

【基础算法】双指针

1.移动零 移动零 思路: 利用双指针算法 cur:从左往右扫描数组,遍历数组 dest:处理好的区间包括dest dest初始化为-1,因为刚开始dest前应该没有非零元素。 即将非零元素移到dest之前即可 class Solution { public…

2016年新华三杯复赛实验试题

2016年新华三杯复赛实验试题 拓扑图 配置需求 考生根据以下配置需求在 HCL 中的设备上进行相关配置。 以太网接口配置 将 S1、S2 的以太网接口 G1/0/1 至 G1/0/16 的模式用命令 combo enable copper 激活为电口。 虚拟局域网 为了减少广播,需要规划并配置 VLA…

浏览器工作原理与实践--HTTPS:浏览器如何验证数字证书

你好,我是李兵。 在《HTTPS:让数据传输更安全》这篇文章中,我们聊了下面几个问题: HTTPS使用了对称和非对称的混合加密方式,这解决了数据传输安全的问题; HTTPS引入了中间机构CA,CA通过给服务器…

重生奇迹mu卷轴有什么用

问题一:重生奇迹mu里面的国王卷轴有什么用啊?创造宝石怎么用啊?国王卷不晓得~~宝石用来创造果实的。(属性果实) 问题二:请问重生奇迹mu里国王卷轴去哪弄?天空之城有,废墟1和2也有,遗址230也有…

付费SSL证书比免费SSL证书好在哪?

1. 身份证明更权威:付费证书可进行深度身份验证,让访客知道你的网站是真实、合法的公司运营,尤其高级证书能在浏览器地址栏显示公司名,让人一看就放心。 2. 适用范围广:有单域名、多域名、通配符等多种证书类型&#x…

基于SpringBoot的“幼儿园管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“幼儿园管理系统”的设计与实现(源码数据库文档PPT) 开发语言:Java 数据库:MySQL 技术:SpringBoot 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 个人信息界面图 缴费信息管理界…

重温javascript --(一)值的介绍

值的介绍 一、 值类型: 原始值 stack栈: 遵循后进先出原则,中主要存放一些基本类型的变量和对象的引用。如:Number String Boolean undefined null symbol BigInt 栈内不可修改值,内存满才会实现二次值覆盖 引用值 heap堆&#x…

C盘满了如何清理

1.更改位置 (1)找到要更改的用户 (2)找到要更改的部分,右键点击“属性” (3)选择“位置”——“移动”——选择要移动的盘及地方 点击“确定”——“是”,等待迁移完成

STL_vector源码剖析

STL vector STL2.91源码地址: https://github.com/lewischeng-ms/sgi-stl 侯捷老师用的是 2.91,不同版本的STL差异很大,靠后版本的STL用了太多typedef以及继承关系,导致可读性很差。 本文参考博客: https://blog.csdn.net/weixin_45389639/article/detai…

Docker NetWork (网络)

Docker 为什么需要网络管理 容器的网络默认与宿主机及其他容器都是相互隔离的,但同时我们也要考虑下面的一些问题, 比如 多个容器之间是如何通信的容器和宿主机是如何通信的容器和外界主机是如何通信的容器中要运行一些网络应用(如 nginx、web 应用、数…

【Linux系统编程】第七弹---权限管理操作(上)

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、修改文件权限的做法(一) 2、有无权限的表现 总结 上一弹我们讲解了Linux权限概念相关的知识,但是我们只知道有…

设计模式学习笔记 - 开源实战四(中):剖析Spring框架中用来支持扩展的设计模式

概述 上篇文章,学习了 Spring 框架背后蕴含的设计思想,比如约定优于配置、低侵入松耦合、模块化轻量级等等。这些设计思想可以借鉴到其他框架开发中,在大的设计层面提高框架的代码质量。 除了上篇文章降到的设计思想,实际上&…

yolov8 裁剪检测结果

yolov8 裁剪检测结果 1. 基础2. 图片批量裁剪2.1 检测裁剪2.2 分割裁剪 3. 视频裁剪3.1 检测裁剪3.2 分割裁剪3.3 实时裁剪 4. 源码 1. 基础 本项目是在 WindowsYOLOV8环境配置 的基础上实现的 思路:将检测得到的物体边框提取,然后边框裁剪原图&#xf…

Python网络数据抓取(3):Requests

引言 在这一部分,我们将探讨Python的requests库,并且利用这个库来进行网页数据抓取。那么,我们为何需要这个库,以及怎样利用它呢? requests库是广受大家欢迎的一个库,它是下载次数最多的。这个库使我们能够…

直流负载在新能源领域的作用有哪些

直流负载在新能源领域的作用主要体现在以下几个方面: 新能源如太阳能、风能等,其发电过程中产生的电能为直流电。传统的电力系统主要采用交流电,因此在新能源并网时需要进行逆变器转换。然而,逆变器在转换过程中会存在一定的能量损…

设计模式-模板模式

模板设计模式 定义 在模板模式中,一个抽象类公开定义了执行它的方法的方式/模板。它的子类可以按需要重写方法实现,但调用将以抽象类中定义的方式进行。 简单来说,有多个子类共有的方法,且逻辑相同,可以考虑作为模板方法。 模板的价值就在于骨架的定义,骨架内部将问题…
最新文章