位置: 编程技术 - 正文

解析Vue 2.5的Diff算法(vue3.0diff)

编辑:rootadmin

推荐整理分享解析Vue 2.5的Diff算法(vue3.0diff),希望有所帮助,仅作参考,欢迎阅读内容。

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

DOM“天生就慢”,所以前端各大框架都提供了对DOM操作进行优化的办法,Angular中的是脏值检查,React首先提出了Virtual Dom,Vue2.0也加入了Virtual Dom,与React类似。

本文将对于Vue 2.5.3版本中使用的Virtual Dom进行分析。

updataChildren是Diff算法的核心,所以本文对updataChildren进行了图文的分析。

1.VNode对象

一个VNode的实例包含了以下属性,这部分代码在src/core/vdom/vnode.js里

tag: 当前节点的标签名 data: 当前节点的数据对象,具体包含哪些字段可以参考vue源码types/vnode.d.ts中对VNodeData的定义 children: 数组类型,包含了当前节点的子节点 text: 当前节点的文本,一般文本节点或注释节点会有该属性 elm: 当前虚拟节点对应的真实的dom节点 ns: 节点的namespace context: 编译作用域 functionalContext: 函数化组件的作用域 key: 节点的key属性,用于作为节点的标识,有利于patch的优化 componentOptions: 创建组件实例时会用到的选项信息 child: 当前节点对应的组件实例 parent: 组件的占位节点 raw: raw html isStatic: 静态节点的标识 isRootInsert: 是否作为根节点插入,被 isComment: 当前节点是否是注释节点 isCloned: 当前节点是否为克隆节点 isOnce: 当前节点是否有v-once指令

2.VNode的分类

VNode可以理解为VueVirtual Dom的一个基类,通过VNode构造函数生成的VNnode实例可为如下几类:

EmptyVNode: 没有内容的注释节点 TextVNode: 文本节点 ElementVNode: 普通元素节点 ComponentVNode: 组件节点 CloneVNode: 克隆节点,可以是以上任意类型的节点,唯一的区别在于isCloned属性为true

3.Create-Element源码解析

这部分代码在src/core/vdom/create-element.js里,我就直接粘代码加上我的注释了

4.Patch原理

patch函数的定义在src/core/vdom/patch.js中,patch逻辑比较简单,就不粘代码了

patch函数接收6个参数:

oldVnode: 旧的虚拟节点或旧的真实dom节点 vnode: 新的虚拟节点 hydrating: 是否要跟真是dom混合 removeOnly: 特殊flag,用于 parentElm: 父节点 refElm: 新节点将插入到refElm之前

patch的逻辑是:

if vnode不存在但是oldVnode存在,说明意图是要销毁老节点,那么就调用invokeDestroyHook(oldVnode)来进行销

if oldVnode不存在但是vnode存在,说明意图是要创建新节点,那么就调用createElm来创建新节点

else 当vnode和oldVnode都存在时

if oldVnode和vnode是同一个节点,就调用patchVnode来进行patch

当vnode和oldVnode不是同一个节点时,如果oldVnode是真实dom节点或hydrating设置为true,需要用hydrate函数将虚拟dom和真是dom进行映射,然后将oldVnode设置为对应的虚拟dom,找到oldVnode.elm的父节点,根据vnode创建一个真实dom节点并插入到该父节点中oldVnode.elm的位置

patchVnode的逻辑是:

1.如果oldVnode跟vnode完全一致,那么不需要做任何事情

2.如果oldVnode跟vnode都是静态节点,且具有相同的key,当vnode是克隆节点或是v-once指令控制的节点时,只需要把oldVnode.elm和oldVnode.child都复制到vnode上,也不用再有其他操作

3.否则,如果vnode不是文本节点或注释节点

如果oldVnode和vnode都有子节点,且2方的子节点不完全一致,就执行updateChildren 如果只有oldVnode有子节点,那就把这些节点都删除 如果只有vnode有子节点,那就创建这些子节点 如果oldVnode和vnode都没有子节点,但是oldVnode是文本节点或注释节点,就把vnode.elm的文本设置为空字符串

4.如果vnode是文本节点或注释节点,但是vnode.text != oldVnode.text时,只需要更新vnode.elm的文本内容就可以

代码如下:

5.updataChildren原理

updateChildren的逻辑是:

分别获取oldVnode和vnode的firstChild、lastChild,赋值给oldStartVnode、oldEndVnode、newStartVnode、newEndVnode

解析Vue 2.5的Diff算法(vue3.0diff)

如果oldStartVnode和newStartVnode是同一节点,调用patchVnode进行patch,然后将oldStartVnode和newStartVnode都设置为下一个子节点,

如果oldEndVnode和newEndVnode是同一节点,调用patchVnode进行patch,然后将oldEndVnode和newEndVnode都设置为上一个子节点,重复上述流程

如果oldStartVnode和newEndVnode是同一节点,调用patchVnode进行patch,如果removeOnly是false,那么可以把oldStartVnode.elm移动到oldEndVnode.elm之后,然后把oldStartVnode设置为下一个节点,newEndVnode设置为上一个节点,重复上述流程

如果newStartVnode和oldEndVnode是同一节点,调用patchVnode进行patch,如果removeOnly是false,那么可以把oldEndVnode.elm移动到oldStartVnode.elm之前,然后把newStartVnode设置为下一个节点,oldEndVnode设置为上一个节点,重复上述流程

如果以上都不匹配,就尝试在oldChildren中寻找跟newStartVnode具有相同key的节点,如果找不到相同key的节点,说明newStartVnode是一个新节点,就创建一个,然后把newStartVnode设置为下一个节点

如果上一步找到了跟newStartVnode相同key的节点,那么通过其他属性的比较来判断这2个节点是否是同一个节点,如果是,就调用patchVnode进行patch,如果removeOnly是false,就把newStartVnode.elm插入到oldStartVnode.elm之前,把newStartVnode设置为下一个节点,重复上述流程

如果在oldChildren中没有寻找到newStartVnode的同一节点,那就创建一个新节点,把newStartVnode设置为下一个节点,重复上述流程

如果oldStartVnode跟oldEndVnode重合了,并且newStartVnode跟newEndVnode也重合了,这个循环就结束了

具体代码如下:

6.具体的Diff分析

不设key,newCh和oldCh只会进行头尾两端的相互比较,设key后,除了头尾两端的比较外,还会从用key生成的对象oldKeyToIdx中查找匹配的节点,所以为节点设置key可以更高效的利用dom。

diff的遍历过程中,只要是对dom进行的操作都调用api.insertBefore,api.insertBefore只是原生insertBefore的简单封装。

比较分为两种,一种是有vnode.key的,一种是没有的。但这两种比较对真实dom的操作是一致的。

对于与sameVnode(oldStartVnode, newStartVnode)和sameVnode(oldEndVnode,newEndVnode)为true的情况,不需要对dom进行移动。

总结遍历过程,有3种dom操作:上述图中都有

1.当oldStartVnode,newEndVnode值得比较,说明oldStartVnode.el跑到oldEndVnode.el的后边了。

2.当oldEndVnode,newStartVnode值得比较,oldEndVnode.el跑到了oldStartVnode.el的前边,准确的说应该是oldEndVnode.el需要移动到oldStartVnode.el的前边”。

3.newCh中的节点oldCh里没有, 将新节点插入到oldStartVnode.el的前边

在结束时,分为两种情况:

1.oldStartIdx > oldEndIdx,可以认为oldCh先遍历完。当然也有可能newCh此时也正好完成了遍历,统一都归为此类。此时newStartIdx和newEndIdx之间的vnode是新增的,调用addVnodes,把他们全部插进before的后边,before很多时候是为null的。addVnodes调用的是insertBefore操作dom节点,我们看看insertBefore的文档:parentElement.insertBefore(newElement, referenceElement)

如果referenceElement为null则newElement将被插入到子节点的末尾。如果newElement已经在DOM树中,newElement首先会从DOM树中移除。所以before为null,newElement将被插入到子节点的末尾。

2.newStartIdx > newEndIdx,可以认为newCh先遍历完。此时oldStartIdx和oldEndIdx之间的vnode在新的子节点里已经不存在了,调用removeVnodes将它们从dom里删除

总结

以上所述是小编给大家介绍的解析Vue 2.5的Diff算法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

angularjs实现时间轴效果的示例代码 一引入包引入angular-timeline包。下载地址:angular-timeline.zip在index.html中引入linkhref="lib/angular-timeline/dist/angular-timeline.css"rel="externalnofollow"rel="stylesheet"scriptsr

关于 angularJS的一些用法 AngularJS事件指令:ng-click/dblclickng-mousedown/upng-mouseenter/leaveng-mousemove/over/outng-keydown/up/pressng-focus/blurng-submit和ng-click一样,都是给dom绑定事件的需要注意的

vue.js项目中实用的小技巧汇总 前言Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易

标签: vue3.0diff

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

上一篇:浅谈vue,angular,react数据双向绑定原理分析(浅谈如何培养孩子的注意力)

下一篇:angularjs实现时间轴效果的示例代码(angularjs时间控件)

  • 厂房出租开发票怎么交税
  • 如何计算转让金融商品盘亏应交增值税
  • 税收减免属于什么收入
  • 税务师证书图片
  • 异常凭证进项税额转出
  • 对方发票丢了能报销吗
  • 税务结清后多少时间内工商需要注销
  • 招待客人的住宿费能抵扣吗?
  • 税金及附加有啥
  • 用现金购买的股票
  • 固定资产更换配件怎么界定是否满足资本化
  • 知识产权服务项目
  • 去年的定额的发票可以报销吗?
  • 员工无息借款个人所得税
  • 营改增后建筑企业财务核算
  • 制造业异地安装要预缴增值税吗?如何预缴?
  • 固定资产增值税怎么抵扣
  • 专项资金需要交印花税吗
  • 自制半成品生产成本
  • 出租柜台收取的服务费
  • 企业是核定征收还是查账征收怎么查
  • 会计科目与账户的关系
  • 固定资产减值准备影响折旧吗
  • 房地产企业个人所得税
  • PHP:oci_field_precision()的用法_Oracle函数
  • Mtdacq.exe - Mtdacq是什么进程 有什么用
  • php未定义数组下标0
  • vue上传文件和后端upload
  • 实收资本的会计编码
  • laravel sqlserver
  • 进项税加计抵扣10%和15%
  • 待报解预算收入什么意思
  • 前端 高级
  • vue3 + ts
  • php实现的功能
  • 代码简单图案
  • wrap激活
  • 个税返还的会计处理
  • 个税网上申报流程视频
  • 报关单填制的运费是什么
  • 稿费支付方式怎么填
  • vue打包找不到文件
  • 企业应纳税所得额的计算应遵循权责发生制原则
  • 资产减值损失的借贷方向
  • 社保工伤保险可以退吗
  • 环保税计税依据怎么算
  • 非营利企业的劳动力需求有哪些特点
  • 二手车经销管理办法
  • mysql三种安装方式
  • 资产负债表是怎么核对的
  • 小规模定额征收和查账征收哪个更好一些
  • 个人独资企业进行委托管理要签订劳动合同
  • 工会经费如何支出
  • 报销金额比发票金额少可以吗
  • 如何理解会计的本质
  • 法人网上变更流程
  • 什么是大病医疗救助
  • 其他应收款包括哪些会计科目
  • 滞留专票会有什么风险
  • 总账的设置和登记实训报告
  • 低配置装什么系统
  • fat32转换为ntfs分区命令
  • macbookpro隐藏
  • mac禁用标志
  • win10相机模糊
  • win8优化驱动器
  • 新买的笔记本电脑需要做什么
  • Win10红石版Edge浏览器新扩展功能:关灯(附扩展程序使用)
  • win7 64位纯净版系统c盘空间显示与实际占用空间不对的解决方法图文教程
  • 常用的批处理文件
  • bat批处理命令大全
  • jquery 字符串以什么开头
  • jquery的checked
  • unity移动游戏开发
  • 网页全屏是哪个键
  • python中字典怎么用
  • 小微企业企业所得税是多少?
  • 浙江税务网上开票流程图
  • 船舶吨税多少天缴纳一次
  • 安徽省纪检监察官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设