位置: 编程技术 - 正文

解析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时间控件)

  • 收到退税款怎么入账
  • 税后经营净利润加折旧与摊销
  • 所得税申报是什么
  • 基本户和一般户的用途
  • 所得税季度预交税率是多少
  • 支付残保金分录怎么写
  • 月报和季度报的区别
  • 金蝶打印凭证页码范围
  • 单位和职工个人缴费基数如何确定的规定
  • 交易性金融资产借贷方向
  • 建筑业出售废旧电脑取的收入如何申报
  • 软件分几次开票怎么入账
  • 打款到另外公司作为投资款的会计分录怎么做?
  • 本月完工产品的会计分录
  • 代购的货可以退吗
  • 企业注销后款项怎么结算
  • 补贴属于什么手段
  • 摊销生产车间负担的保险费
  • 商业折扣销售会计分录
  • 免抵退转免税
  • 小规模纳税人如何计算增值税
  • 计提房租的原始凭证包括
  • 学校食堂承包餐饮公司
  • 2021年6月更新
  • 调增应纳税所得额季度申报表怎么填
  • 天猫公司不开银行卡吗
  • 房东不开发票违法吗
  • 0xc000007b应用程序无法正常启动win11
  • 任务栏没反应怎么重启
  • 竣工结算的依据有哪些?
  • umi ts
  • lsass.exe是什么进程
  • 企业类型变更是什么意思
  • 冲销进项税
  • 老项目简易征收税务需要的资料有哪些
  • php读取excel文件
  • 延期交房补偿协议
  • SSD目标检测算法
  • yii2框架从入门到精通
  • 进项税额转出结转会计分录怎么写
  • while循环语法结构
  • 公司的注册资本是什么意思
  • 小规模纳税人每月不超过10万
  • 企业都有哪些资质
  • mongodb快速入门
  • 小企业一年需要缴纳多少税
  • 预收货款开具专用发票
  • 合并报表抵消分录
  • mysql索引之间的区别
  • 事故赔偿给谁
  • sql server自动生成行号
  • 货款未转到公司怎么处理
  • 折扣销售方式销售货物只要发票中有注明的折扣额
  • 收到技术服务费的账务处理
  • 开票必须填写开户银行吗
  • 坏账准备转回是什么意思
  • solaris syslog
  • vnc server apk
  • boot from
  • windows怎样删除文件
  • winxp系统设备管理器
  • 删除window
  • 用linux做服务器
  • win8系统怎么还原出厂设置
  • linux系统入侵检测软件有哪些
  • cocos2dx-3.x(二)、坐标系
  • unity之血瓶金币的生成
  • linux删除文件语句
  • linux 检查网络状态
  • angular.js
  • jQuery继承extend用法详解
  • 安卓拍照闪退
  • scrollbottom用法
  • python代码检测在线
  • 动态表单的设计与实现
  • 土地占用税是什么意思
  • 怎么称呼税管员比较好
  • 法人注册怎么注册
  • 金坛归属南京
  • 税务局的纳税服务中心是干什么的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设