vue的diff算法?

文章目录

  • 是什么
      • 比较方式
      • 原理分析
      • Diff算法的步骤:
      • 首尾指针法
      • 比对顺序:


是什么

diff 算法是一种通过同层的树节点进行比较的高效算法
其有两个特点:

比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中,循环从两边向中间比较

比较方式

diff整体策略为:深度优先,同层比较

  • 比较只会在同层级进行, 不会跨层级比较
  • 比较的过程中,循环从两边向中间收拢

原理分析

在这里插入图片描述

Diff算法的步骤:

之后判断新旧两个节点是否为同类标签,如果不是同类标签就直接替换;如果是同类标签的话,进一步执行patchVnode()方法,在这个方法内部,也是需要先判断一下新旧虚拟节点是否相同,如果相等,就直接return;如果不相等就需要分情况来比对,比对的原则就是以新虚拟节点的结果为准,分为以下几种情况:

oldvnode和newvnode都有文本节点—执行—>用新的文本节点替换旧文本节点
oldvnode没有子节点,newvnode有子节点—执行—>添加新的子节点
oldvnode有子节点,newvnode没有子节点—执行—>删除旧的子节点
oldvnode和newvnode都有子节点—执行—>updateChildren()方法

首尾指针法

    ①依次比对,当比较成功后退出当前比较

    ②渲染结构以newVnode为准

    ③每次比较成功之后start点和end点向中间靠拢

    ④当新旧节点中有一个start点跑到end点右侧时终止比较

    ⑤如果都匹配不到,则旧虚拟DOM key只去比对新虚拟DOM的key值,
    如果key相同则复用,并移动到新虚拟DOM的位置

比对顺序:

  • 首先,旧虚拟节点的start和新虚拟节点的start做比对,如果没有比对成功,就用旧虚拟节点的start和新虚拟节点的end做比对。

  • 如果依旧没有比对成功,就用旧虚拟节点的end和新虚拟节点的start做比对,如果依旧没有比对成功,旧虚拟节点的end会和新虚拟节点的end做比对

  • 当比对成功,就退出当前比对,渲染结果会以新虚拟节点的结果为准

  • 每次比对成功后,比对成功的start会向右侧移动,end会向左侧移动。在移动的过程中,当start点跑到end点右侧的时候就终止比较。

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

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

相关文章

2023年网络安全趋势

数据安全越来越重要。 我国《数据安全法》提出“建立健全数据安全治理体系”,各地区部门均在探索和简历数据分类分级、重要数据识别与重点保护制度。 数据安全治理不仅是一系列技术应用或产品,更是包括组织构建、规范制定、技术支撑等要素共同完成数据…

【FPGA-Spirit_V2】小精灵V2开发板初使用

🎉欢迎来到FPGA专栏~小精灵V2开发板初使用 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒🍹 ✨博客主页:小夏与酒的博客 🎈该系列文章专栏:FPGA学习之旅 文章作者技术和水平有限,如果文中出现错误,希望大家…

Kaggle实战入门:泰坦尼克号生生还预测

Kaggle实战入门:泰坦尼克号生生还预测1. 加载数据2. 特征工程3. 模型训练4. 模型部署泰坦尼克号(Titanic),又称铁达尼号,是当时世界上体积最庞大、内部设施最豪华的客运轮船,有“永不沉没”的美誉&#xff…

Spring-Kafka 发送消息的两种写法

文章目录前言写法一:发送的消息对象是字符串1 创建项目2 项目结构3 application.yml 配置文件4 生产者 KafkaProducerComponent5 消费者 KafkaConsumerComponent6 控制器(GET请求发送消息)7 启动类8 测试效果写法二:发送复杂消息对…

【C++】多态

文章目录多态的概念多态的定义及实现多态的构成条件虚函数虚函数的重写C11 final和override抽象类概念多态的原理(以下演示在32平台)虚函数表多态的原理静态绑定和动态绑定单继承和多继承关系的虚函数表单继承派生类的虚函数表多继承派生类的虚函数表其他…

彻底理解Session、Cookie、Token,入门及实战

文章目录Session Cookie的使用Token的使用Session Cookie的使用 1. Session存储数据 HttpSession session request.getSession(); //Servlet底层通过的SESSIONID,获取Session对象。 session.setAttribute("loginTime",new Date()); out.println(&q…

【算法基础】数据结构| 单链表+双链表 代码实现+图解+原理

博主简介:努力学习的预备程序媛一枚~博主主页: 是瑶瑶子啦所属专栏: Java岛冒险记【从小白到大佬之路】 前言 因为瑶瑶子正在备战蓝桥杯和校内ACM选拔赛,最近在学习算法相关的知识。我是借助AcWing网站来学习的,这篇文章是我学习…

1.3 K8S入门之组件说明

Borg K8S起源于Borg系统三种请求来源: borgcfgCLTWEB browsersBorgMaster: 负责请求的分发Borglet: 工人sheduler:包工头 和Persist store交互,不直接和Borglet交互Borglet监听Persist store K8S CS结构 Master服务器Node节点 Replicat…

行业洞察丨PDF图纸为什么影响生产企业的生产质量?订单交期?

随着现代社会科技的发展,在全球激烈的市场竞争下,国内企业基于质量和成本的竞争已经日益转化为基于时间的竞争,如何快速响应瞬息万变的市场需求,更快完成生产订单交付?这已成为生产型企业面临的一大痛点。 承接市场客户…

python搭建web服务器

前言:相信看到这篇文章的小伙伴都或多或少有一些编程基础,懂得一些linux的基本命令了吧,本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python:一种编程语言&…

用 DolphinDB 和 Python Celery 搭建一个高性能因子计算平台

因子挖掘是量化金融研究和交易的核心工作。传统的开发流程中,通常使用 Python 从关系型数据库(如 SqlServer, Oracle 等)读取数据,在 Python 中进行因子计算。随着证券交易规模不断扩大以及交易数据量的激增,用户对因子…

QT VTK开发 (一、下载编译)

Vtk,(visualization toolkit)是一个开源的免费软件系统,主要用于三维计算机图形学、图像处理和可视化。Vtk是在面向对象原理的基础上设计和实现的,它的内核是用C构建的,包含有大约250,000行代码&#xff0c…

计算机组成原理实验一(完整)

在VC中使用调试功能将下列语句运行的内存存放结果截图&#xff0c;每运行一句需截图一次。 #include<stdio.h> int main() {int a 你的学号末两位-100; //0x&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#x…

关于Anaconda的下载和安装方法及报错说明

初学者接触python时&#xff0c;常会因各种环境问题、各种包的安装问题而苦恼&#xff0c;Anaconda则可以解决这一切繁琐的问题&#xff0c;但很多人不知道如何下载安装配置&#xff0c;本文详细讲述下载和安装配置过程&#xff0c;也汇总常见安装过程中的错误&#xff08;零基…

【3】核心易中期刊推荐——人工智能计算机仿真

🚀🚀🚀NEW!!!核心易中期刊推荐栏目来啦 ~ 📚🍀 核心期刊在国内的应用范围非常广,核心期刊发表论文是国内很多作者晋升的硬性要求,并且在国内属于顶尖论文发表,具有很高的学术价值。在中文核心目录体系中,权威代表有CSSCI、CSCD和北大核心。其中,中文期刊的数…

【Kubernetes】第二十八篇 - 实现自动构建部署

一&#xff0c;前言 上一篇&#xff0c;介绍了 Deployment、Service 的创建&#xff0c;完成了前端项目的构建部署&#xff1b; 希望实现&#xff1a;推送代码 -> 自动构建部署-> k8s 滚动更新&#xff1b; 本篇&#xff0c;实现自动构建部署 二&#xff0c;推送触发构…

28个案例问题分析---15---登陆之后我加入的课程调用接口报错--ArrayList线程不安全。占用内存情况

ArrayList线程不安全。占用内存情况故事背景方案&思路解决线程不安全的问题方案一&#xff1a;在这两个方法之前添加 synchronized 关键字。方案二&#xff1a;使用ThreadLocal变量。解决重复创建对象问题。总结&升华故事背景 存入redis的值&#xff0c;可能会出现错误…

黑马《数据结构与算法2023版》正式发布

有人的地方就有江湖。 在“程序开发”的江湖之中&#xff0c;各种技术流派风起云涌&#xff0c;变幻莫测&#xff0c;每一位IT侠客&#xff0c;对“技术秘籍”的追求和探索也从未停止过。 要论开发技术哪家强&#xff0c;可谓众说纷纭。但长久以来&#xff0c;确有一技&#…

实用调试技巧【详细介绍】

实用调试技巧1. 什么是bug&#xff1f;2. 调试是什么&#xff1f;有多重要&#xff1f;2.1 调试是什么&#xff1f;2.2 调试的基本步骤2.3 Debug和Release的介绍3. Windows环境调试介绍3.1 调试环境的准备3.2 学会快捷键3.3 调试的时候查看程序当前信息3.3.1 查看临时变量的值3…

Java中的异常

程序错误一般分为三种&#xff1a;编译错误&#xff1a; 编写程序时没有遵循语法规则&#xff0c;编译程序能够自己发现错误并提示位置和原因。运行错误&#xff1a;程序在执行的时候运行环境发现了不能执行的操作。比如&#xff0c;JVM出错了&#xff0c;内存溢出等。逻辑错误…