位置: IT常识 - 正文

Vue3 diff算法图解分析(vue2 diff算法)

编辑:rootadmin
Vue3 diff算法图解分析 大家好,我是剑大瑞,本篇文章主要分析Vue3 diff算法,通过本文你可以知道: diff的主要过程,核心逻辑 diff是如何进行节点复用、移动、卸载 并有一个示例题,可以结合本文进行练习分析 如果你还不是特别了解Vnode、渲染器的patch流程,建议先阅读下面两篇 ... Vue3 diff算法图解分析

推荐整理分享Vue3 diff算法图解分析(vue2 diff算法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 diff算法原理,vue diff算法详解,vue differ,vue中diff,vue3.0 diff 算法,vuediff算法原理,vue3的diff算法,vue3.0 diff 算法,内容如对您有帮助,希望把文章链接给更多的朋友!

大家好,我是剑大瑞,本篇文章主要分析Vue3 diff算法,通过本文你可以知道:

diff的主要过程,核心逻辑diff是如何进行节点复用、移动、卸载并有一个示例题,可以结合本文进行练习分析

如果你还不是特别了解Vnode、渲染器的patch流程,建议先阅读下面两篇文章:

Vnode渲染器分析1.0 diff 无key子节点

在处理被标记为UNKEYED_FRAGMENT时。

首先会通过新旧子序列获取最小共同长度commonLength。

对公共部分循环遍历patch。

patch 结束,再处理剩余的新旧节点。

如果oldLength > newLength,说明需要对旧节点进行unmount

否则,说明有新增节点,需要进行mount;

Vue3 diff算法图解分析(vue2 diff算法)

这里贴下省略后的代码。

const patchUnkeyedChildren = (c1, c2,...res) => { c1 = c1 || EMPTY_ARR c2 = c2 || EMPTY_ARR // 获取新旧子节点的长度 const oldLength = c1.length const newLength = c2.length // 1. 取得公共长度。最小长度 const commonLength = Math.min(oldLength, newLength) let i // 2. patch公共部分 for (i = 0; i < commonLength; i++) { patch(...) } // 3. 卸载旧节点 if (oldLength > newLength) { // remove old unmountChildren(...) } else { // mount new // 4. 否则挂载新的子节点 mountChildren(...) } }

从上面的代码可以看出,在处理无key子节点的时候,逻辑还是非常简单粗暴的。准确的说处理无key子节点的效率并不高。

因为不管是直接对公共部分patch,还是直接对新增节点进行mountChildren(其实是遍历子节点,进行patch操作),其实都是在递归进行patch,这就会影响到性能。

2.0 diff 有key子节点序列

在diff有key子序列的时候,会进行细分处理。主要会经过以下一种情况的判断:

起始位置节点类型相同。结束位置节点类型相同。相同部分处理完,有新增节点。相同部分处理完,有旧节点需要卸载。首尾相同,但中间部分存在可复用乱序节点。

在开始阶段,会先生面三个指正,分别是:

i = 0,指向新旧序列的开始位置e1 = oldLength - 1,指向旧序列的结束位置e2 = newLength - 1,指向新序列的结束位置

let i = 0const l2 = c2.lengthlet e1 = c1.length - 1 // prev ending indexlet e2 = l2 - 1 // next ending index

下面开始分情况进行diff处理。

2.1 起始位置节点类型相同

对于起始位置类型相同的节点,从左向右进行diff遍历。

如果新旧节点类型相同,则进行patch处理

节点类型不同,则break,跳出遍历diff

// i <= 2 && i <= 3while (i <= e1 && i <= e2) { const n1 = c1[i] const n2 = c2[i] if (isSameVNodeType(n1, n2)) { // 如果是相同的节点类型,则进行递归patch patch(...) } else { // 否则退出 break } i++}

上面上略了部分代码,但不影响主要逻辑。

从代码可以知道,遍历时,利用前面在函数全局上下文中

本文链接地址:https://www.jiuchutong.com/zhishi/303770.html 转载请保留说明!

上一篇:2 BASH 的基本语法(bash的主要功能)

下一篇:phpcms phpsso验证码错误(php手机验证码验证)

  • 小米手机负一屏怎么设置(小米手机负一屏推荐卡片怎么关闭)

    小米手机负一屏怎么设置(小米手机负一屏推荐卡片怎么关闭)

  • 淘宝开团是什么意思啊(淘宝开团是什么意思,不能直接买吗)

    淘宝开团是什么意思啊(淘宝开团是什么意思,不能直接买吗)

  • 怎么删除微信相册里面的图片和视频(怎么删除微信相册)

    怎么删除微信相册里面的图片和视频(怎么删除微信相册)

  • 华为微信锁屏不显示内容(华为微信锁屏不显示内容怎么办)

    华为微信锁屏不显示内容(华为微信锁屏不显示内容怎么办)

  • 抖音短视频与抖音火山版有什么区别(抖音短视频与抖音火山版区别)

    抖音短视频与抖音火山版有什么区别(抖音短视频与抖音火山版区别)

  • 苹果低电量模式伤电池吗(苹果低电量模式怎么开)

    苹果低电量模式伤电池吗(苹果低电量模式怎么开)

  • cpu有哪三部分组成(cpu由三部分组成)

    cpu有哪三部分组成(cpu由三部分组成)

  • 荣耀20pro怎么关闭开发者模式(荣耀20pro怎么关闭热门推荐)

    荣耀20pro怎么关闭开发者模式(荣耀20pro怎么关闭热门推荐)

  • qq怎么知道对方已经阅读你的信息(qq怎么知道对方是不是隐身状态)

    qq怎么知道对方已经阅读你的信息(qq怎么知道对方是不是隐身状态)

  • oppor11多少w快充(oppor11是多少w快充)

    oppor11多少w快充(oppor11是多少w快充)

  • 苹果11信息有个感叹号(苹果11信息有个感叹号怎么取消)

    苹果11信息有个感叹号(苹果11信息有个感叹号怎么取消)

  • 怎么加入饿了么骑手(怎么加入饿了么商家入驻)

    怎么加入饿了么骑手(怎么加入饿了么商家入驻)

  • 腾讯vip微信别人怎么登(腾讯vip微信别人怎么扫码登录)

    腾讯vip微信别人怎么登(腾讯vip微信别人怎么扫码登录)

  • 淘宝精选怎么做推广(淘宝精选是怎么上的)

    淘宝精选怎么做推广(淘宝精选是怎么上的)

  • 华为屏保新闻怎么关闭(华为手机新闻屏保怎么关闭)

    华为屏保新闻怎么关闭(华为手机新闻屏保怎么关闭)

  • 华为快充协议是什么(华为快充协议是PD吗)

    华为快充协议是什么(华为快充协议是PD吗)

  • 苹果6s手机微信视频怎么美颜(苹果6s手机微信版本过低怎么升级)

    苹果6s手机微信视频怎么美颜(苹果6s手机微信版本过低怎么升级)

  • linux重启命令(linux重启网络服务)

    linux重启命令(linux重启网络服务)

  • 段前段后0.5行是多少磅(段前段后0.5行是什么效果)

    段前段后0.5行是多少磅(段前段后0.5行是什么效果)

  • 怎样看是不是京东自营(怎么看是不是京籍)

    怎样看是不是京东自营(怎么看是不是京籍)

  • 快影导出视频在哪里(快影导出视频在哪里找到)

    快影导出视频在哪里(快影导出视频在哪里找到)

  • Vue中二级菜单的实现(vue二级菜单的隐藏与显示)

    Vue中二级菜单的实现(vue二级菜单的隐藏与显示)

  • BootStrap--selectpicker的使用

    BootStrap--selectpicker的使用

  • 企业出售土地的土地增值税计算方法
  • 无效产权转移的契税需要征收吗?
  • 超过500万需要补税吗
  • 哪些税不用通过应交税费
  • 税金及附加需要计提吗
  • 纳税额是指
  • 增值税相关政策
  • 养老保险滞纳金最高限额规定
  • 增值税不含税销售额怎么计算
  • 金税盘如何增加税率
  • 2019年计算机软件行业人均年工资
  • 能否向小规模纳税人开具专票
  • 待摊费用是
  • 租赁植物费用
  • 关联方借款的企业所得税政策
  • 样机销售是什么意思
  • 商贸公司可以申请进出口权吗
  • 个体工商户3万以下免个人经营所得税吗
  • 建筑企业新项目增值税的计算
  • 通讯费计入什么部门
  • 制冷设备增值税税率
  • 个人所得税违约怎么查询
  • 报税遇节假日延长吗?
  • 预提固定资产折旧费
  • 小规模开票后的分录怎么做
  • 基金管理人收取回扣
  • 公司付电费发票怎么做账
  • 企业从境外收回所得税
  • 投资回报期限
  • 奖金发放如何做账
  • 计划成本法存货成本的确定
  • 光纤布线有什么作用
  • win71
  • php字符串函数大全
  • 营改增建筑企业增值税
  • vue 查询
  • framework4.0怎么打开
  • 安卓跑ubuntu
  • 非正常损失可以税前扣除吗
  • idea配置meaven
  • 专项应付款能转回来吗
  • 补缴去年的税款会计分录
  • 研发费用加计扣除2022政策
  • 残疾人保证金怎么报税
  • 企业所得税年报截止日期2023
  • 办公室购买电脑计入
  • 差旅费报销相关政策
  • 公司申请破产后债务谁来还
  • 个人所得税的征税范围
  • 解决mysql数据库异常断电
  • sqlserver存储过程加密
  • 无形资产土地入账日期怎么确定
  • 在施工期间,承包商可能遇到不能预见
  • 计提工资时个税挂其他应收款
  • 开出地税发票(工程款)怎么做账?
  • 单位缴纳的社保计入什么科目
  • 固定资产抵扣过处置还能简易计税吗
  • 个体户4年不注销有事吗
  • 租办公楼有什么讲究
  • 固定资产多少钱入账
  • sql server高级编程
  • mysql查询包含
  • sql server错误代码1608
  • jquery常用的事件绑定函数有哪些
  • win10显示请勿关闭电脑
  • win8启动文件夹在哪里
  • centos8 php7.4
  • centos6.x下安装maven CentOS自动安装Maven的方法
  • 在linux系统中,用来存放系统所需要的配置文件
  • opengl mc
  • jquery怎么禁用按钮
  • node.js连接不上数据库
  • nodejs bull
  • javascript数组去重set方法
  • jquery return
  • node.js 配置
  • 上海市税务官方网站网址
  • 地税局 要官
  • 建筑企业如何
  • 为什么非贸易付不了款呢
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设