位置: 编程技术 - 正文

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

  • 进项税抵扣怎么弄
  • 减免增值税如何结转
  • 企业增值税会计科目
  • 超率累进税率有哪些税种呢怎么算
  • 行政事业单位决算编制流程图
  • 交易性金融资产有哪些
  • 销售费用有业务招待费餐费么
  • 营改增后纳税人可以使用的发票种类有
  • 认购股份有什么好处
  • 无发票情况说明怎么写学生
  • 非同一控制下企业合并对价小于可辨认
  • 分公司亏损是否也分摊所得税
  • 车子按揭利息
  • 当月未收到进项票怎么处理
  • 不动产修理领用原材料账务处理?
  • 什么费用计入什么科目
  • 单位自有车辆
  • 内账会计成本是指什么
  • 小规模企业怎么报税
  • 国家级企业孵化器是什么意思
  • 并购重组中需要哪些条件
  • 逃避的概念
  • 样品赠送要确认收入吗
  • 物资包括材料吗
  • 新会计准则下的会计科目
  • el-cascader动态加载多级
  • 旅游开发企业会计账务处理
  • 腾讯电脑管家中蓝牙在哪
  • system占用cpu过高怎么解决
  • 桌面图标归纳
  • IE浏览器如何取消全屏
  • php的in_array
  • php字符串变量
  • 场租费发票如何开
  • 企业分红的会计科目
  • 公司支付保洁费可以付给个人吗
  • 免抵退税额好难懂
  • 所得税分配表分录怎么写
  • 约克大教堂是基督教吗
  • 什么是跨域以及跨境电商
  • php网页编程
  • 个体户生产经营所得减免政策
  • vue动态绑定背景图
  • php的array
  • php如何遍历二维数组
  • 物流发票的税率怎么算
  • 企业增值税申报流程
  • mongodb安装教程图解
  • 企业自查补税怎么报税
  • 土增清算后再销售
  • 工程赔付款属于什么科目
  • 短期借款利息是期间费用吗
  • 个贷系统平账专户怎么做分录
  • 电影剧本稿费多少
  • 应付账款挂账
  • 建账要求
  • 子公司实现利润怎么会计处理
  • 报销冲抵什么意思
  • 销售开票怎么做会计分录
  • etc发票当天可以打印吗
  • xp系统和2003系统的异同
  • linux内核的作用
  • win7系统开机出现英文字母
  • 如何查看windows使用痕迹
  • win8.1怎么用
  • 如何解决在沟通中产生的漏斗效应
  • linux系统安装软件教程
  • react native community
  • grid sheet
  • nodejs 插件开发
  • pycharm安装教程2020.2
  • 简述javascript
  • 用jquery
  • mac安装nodejs的权限问题
  • python连接MySQL数据库增删改查
  • python魔法方法详解
  • 个人可以到税务开物业费的
  • 江苏税务怎么在手机上办
  • 河北怎么网上申请无犯罪证明
  • 资源税什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设