当前位置: 首页 > news >正文

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.lryc.cn/news/40607.html

相关文章:

  • C++ | 对比inline内联函数和宏的不同点
  • 面试官问 : ArrayList 不是线程安全的,为什么 ?(看完这篇,以后反问面试官)
  • Linux串口应用编程
  • java程序员学前端-HTML篇
  • 【云原生|Docker】03-docker的基础操作
  • vue2+高德地图web端开发使用
  • 01背包问题c++
  • ZYNQ硬件调试-------day2
  • JavaScript中Promise的简单使用及其原理
  • SpringBoot RabbitMQ 延时队列取消订单【SpringBoot系列14】
  • 【论文阅读 WWW‘23】Zero-shot Clarifying Question Generation for Conversational Search
  • ouc 网络安全实验 格式化字符串漏洞
  • PMSM矢量控制笔记(1.1)——电机的机械结构与运行原理
  • 2022年全国职业院校技能大赛(中职组)网络安全竞赛试题——中间人攻击渗透测试解析(详细)
  • MySQL必知必会 | 安全、维护、性能
  • MaaS Model as a Service 模型即服务
  • 【编程基础】027.C语言中函数在解题中的应用(三)
  • echart图表之highcharts
  • 关于.Net和Java的看法——我见过最牛的一个小实习生经历
  • 基于springboot+vue的“智慧食堂”程序设计实现【毕业论文,源码】
  • 学计算机选择什么编程语言好一些?
  • 持续集成 在 Linux 上搭建 Jenkins,自动构建接口测试
  • MySQL学习笔记(总结)
  • Android开发 Layout布局 ScrollView
  • 手撕数据结构与算法——树(三指针描述一棵树)
  • 字节跳动Java后端开发实习面经
  • STM32实战项目-触摸按键
  • 安全行业-术语(万字)
  • P1113 杂务(拓扑排序 or 记忆回溯)
  • Web3中文|政策影响下的新加坡Web3步伐喜忧参半