Vue原理学习:vdom 和 diff算法(基于snabbdom)

vdom 和 diff

背景

基于组件化,数据驱动视图。只需关心数据,无需关系 DOM ,好事儿。

但是,JS 运行非常快,DOM 操作却非常慢,如何让“数据驱动视图”能快速响应?


引入 vdom

用 vnode 表示真实 DOM 结构

 <div id="div1" class="container">
     <p>vdom</p>
     <ul style="font-size: 20px">
         <li>a</li>
     </ul>
 </div>
 {
     tag: 'div',
     props: {
         className: 'container',
         id: 'div1'
     }
     children: [
         {
             tag: 'p',
             children: 'vdom'
         },
         {
             tag: 'ul',
             props: { style: 'font-size: 20px' }
             children: [
                 {
                     tag: 'li',
                     children: 'a'
                 }
                 // ....
             ]
         }
     ]
 }

演示 vdom 的使用(对比不用 vdom 的情况)—— snabbdom 和 jquery


使用 vdom 能快速操作 DOM

  • JS 执行很快

  • DOM 操作很慢

如何让 DOM 操作最快?—— 尽可能减少 DOM 操作,只操作需要更新的,不做多余操作。

如何尽量减少 DOM 操作?—— 两个 vnode 进行 diff ,找出不同。diff 是 JS 执行,会很快。 (画图示例,两棵 vnode ,找出不同)


diff 算法概述

diff 算法是一个很广泛的,前端常见的例如文本 diff ,json 对象 diff ,还有这里的“树 diff”。

  • 文本 diff ,例如 linux 的 diff 命令

  • json diff ,例如 GitHub - cujojs/jiff: JSON Patch and diff based on rfc6902

  • 树 diff ,如 vdom diff

diff 两棵树的时间复杂度是 O(n^3)(不可用的复杂度),例如 diff(Tree1, Tree2)

  • 遍历 Tree1 ,每个节点都要和 Tree2 对比

  • 针对 Tree1 的节点,遍历 Tree2 每个节点和它对比

  • 重新排序

但是,vdom diff 算法做了几个改进,让复杂度变为 O(n)

  • 只比较同一层级

  • tag 或组件不相同的,直接删掉重建,不再继续深入比较

  • tag 或组件 & key ,两个都相同的,即认为是相同节点


diff 算法过程详解

snabbdom https://github.com/snabbdom/snabbdom 是一款比较简洁、高性能的 vdom lib vue2.x 的 diff 算法完全参考它。 即了解 snabbdom 的 diff 算法,也就了解 vue2.x 的 diff 算法。应该面试的 diff 算法问题足够了

基本流程
  • 回顾一下它的基本使用,找出核心的 API: h patch

  • 下载 snabbdom 源码

  • 查看源码

注意
  • 解读源码,只看主干和要点,不要去扣细节

  • 源码是 ts ,但不妨碍我们阅读,不要关注语法细节

h 函数

【功能】h 函数是一个工厂函数,根据传入的参数,生成 vnode 结构

源码在 src/h.ts

输入和输出 function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;

返回 return vnode(sel, data, children, text, undefined);

vnode 函数

源码在 src/vnode.ts

返回 return {sel, data, children, text, elm, key};

这里可以结合 demo 中的断点来看数据结构。此时的 elem 应该是 undefined

text 和 children

一个元素或者有 contentText ,后者有 children ,两者不能共存 demo 中有示例

patch 函数

【功能】:patch 函数将 newVnode 更新到 vnode 或者 elem 上,patch 的过程也就是 diff 的过程。

判断了老节点是否存在,然后执行销毁或者创建,然后执行 patchVnode

源码 src/snabbdom.ts ,找到其中的 init 函数,最后返回的就是 patch 函数。

输入输出 function patch(oldVnode: VNode | Element, vnode: VNode): VNode

(画图:elem 和 oldVnode vnode 的关系) (要考虑第一个参数是 VNode 和 Element 两种情况)

patchVnode 函数

patchVnode 函数是对比 两个虚拟 dom 不同的地方, 同时 也是 递归 调用 updateChildren 的 函数

源码在 src/snabbdom.ts

先看 addVnodesremoveVnodes ,最后看 updateChildren

updateChildren 函数

key的重要性

源码在 src/snabbdom.ts

以 todo list 的 items 变化,为例,图解演示即可


总结

diff 算法中,细节不是关键例如“头头 头尾 对比”等,核心概念才是关键,如 h vnode patch key 等。 所有的 diff 算法,以及无论如何做优化,都离不开这些核心概念

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/632116.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

邮件API接口的优势有哪些?如何有效整合?

邮件API怎么选&#xff1f;SendCloud与AokSend的性能对比分析&#xff1f; 邮件API接口作为企业与用户沟通的重要桥梁&#xff0c;其重要性不言而喻。Aok将深入探讨邮件API接口的优势、有效整合的方法、选择标准以及SendCloud与AokSend两款邮件发送服务的性能对比分析。 邮件…

这10款安卓APP,简直好用到爆!

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频http://AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频 1.追书——追书神器 追书神器是小说追新大神&#xff0c;全网实…

【大模型微调】一文掌握7种大模型微调的方法

本篇文章深入分析了大型模型微调的基本理念和多样化技术&#xff0c;细致介绍了LoRA、适配器调整(Adapter Tuning)、前缀调整(Prefix Tuning)等多个微调方法。详细讨论了每一种策略的基本原则、主要优点以及适宜应用场景&#xff0c;使得读者可以依据特定的应用要求和计算资源限…

Jquery+Servlet+JDBC实现登录注册功能

前端部分 HTMLCSS部分 引入JQuery包和JQuery.cookie包&#xff0c;前者封装了DOM操作的一些方法&#xff0c;后者封装了对cookie的操作 我们使用cookie主要是为了做登录后页面的跳转时&#xff0c;能存下来这个用户是谁&#xff0c;这样后面可以对单一用户进行操作&#xff…

使用API有效率地管理Dynadot域名,默认将域名隐形转发至其他界面

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

webpack优化构建速度示例-resolve.extensions:

当项目不仅仅包含.js或.json文件&#xff0c;还包含其他类型文件(如.ts、.vue、.css)作为模块时&#xff0c;配置resolve.extensions可以不必要的文件搜索提高性能。 src/index.ts import { someFuction } from ./modulesomeFuction()src/module.tsimport {otherSomeFuction} f…

三分钟快速上手SpringSecurity框架

导入依赖框架 web 框架(spring-boot-starter-web) <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency> springSecurity 框架(spring-boot-starter-security) <de…

【算法】二分查找——在排序数组中查找元素的第一个和最后一个位置

本节博客主要是通过“在排序数组中查找元素的第一个和最后一个位置”总结关于二分算法的左右界代码模板&#xff0c;有需要借鉴即可。 目录 1.题目2.二分边界算法2.1查找区间左端点2.1.1循环条件2.1.2求中点的操作2.1.3总结 2.2查找区间右端点2.1.1循环条件2.1.2求中点的操作2.…

vue框架学习--表单校验

在使用 Element UI&#xff08;一个常见的 Vue UI 组件库&#xff09;&#xff0c;要给 添加表单验证&#xff0c;Element UI 的表单验证通常通过 Form 和 FormItem 组件以及它们的 rules 属性来实现。下面是一个例子&#xff0c;展示如何给联系人字段添加表单验证&#xff1a;…

网页打开:为什么国内用新标签页,国外用当前页?

想写这个话题很久了&#xff0c;因为用百度和Google搜索时&#xff0c;打开搜索结果链接时的交互差异&#xff0c;几乎每天都要提醍我一下。 网页打开——这个交互&#xff0c;在设计里&#xff0c;算是极微小&#xff0c;但影响极广泛的操作设计。甚至&#xff0c;因此形成了…

使用Python处理Excel数据:去除列中的双引号

目录 引言 技术背景 步骤概述 代码示例 案例分析 扩展内容 1. 处理多个列中的双引号 2. 处理大型Excel文件 3. 自定义函数处理数据 4. 错误处理和日志记录 结论 引言 在当今信息爆炸的时代&#xff0c;数据已经成为了各个行业最宝贵的资源之一。而Excel&#xff0c…

转载 | 大佬3万字深度分析:2024全球游戏业正在遭遇什么困境?

2022年&#xff0c;游戏业当时的裁员人数达到了破纪录的8500人&#xff0c;2023年这个数字几乎增长了20%&#xff0c;然后在2024开年的两个月&#xff0c;就已经有7800人丢掉了工作。伴随着这些裁员的&#xff0c;是大量表现不及预期的或者完全失败的游戏&#xff0c;还有更多处…

人工智能(一)架构

一、引言 人工智能这个词不是很新鲜&#xff0c;早就有开始研究的&#xff0c;各种推荐系统、智能客服都是有一定的智能服务的&#xff0c;但是一直都没有体现出多高的智能性&#xff0c;很多时候更像是‘人工智障’。 但是自从chatGpt3被大范围的营销和使用之后&#xff0c;人…

Hbuild-X运行ios基座app

一、说明 ios真机第一次运行的时候需要下载插件&#xff0c;这个都是自动监测&#xff0c;自动下载的&#xff0c;不用多说。ios真机运行是需要签名的&#xff0c;不然就会报以下错误。如何制作免费的签名证书呢&#xff0c;需要借助爱思助手来完成。 二、安装爱思助手 &…

吴恩达机器学习笔记:第 10 周-17大规模机器学习(Large Scale Machine Learning)17.3-17.4

目录 第 10 周 17、 大规模机器学习(Large Scale Machine Learning)17.3 小批量梯度下降17.4 随机梯度下降收敛 第 10 周 17、 大规模机器学习(Large Scale Machine Learning) 17.3 小批量梯度下降 小批量梯度下降算法是介于批量梯度下降算法和随机梯度下降算法之间的算法&am…

一行代码实现vip标志的显示

需求说明 在项目中&#xff0c;后期添加了一种用户类型。需要再用户头像右下角显示一个vip的标志。问题是只要有头像的地方都要显示。而有头像的地方很多&#xff0c;设置到的接口也很多。后面考虑通过一个工具类&#xff0c;将这个功能外挂到原来的业务需要的地方。 实现效果…

Java—如何判断两个浮点数相等

结论 一旦有浮点型数据参与运算的结果&#xff0c;一定不要使用 “ ” 与其比较。 提出问题 我们知道在Java中浮点数float 和 double 的值不能很精准的表示一个小数&#xff0c;因为会有精度损失。 下面来看一个例子&#xff1a; public class FloatTest {public static …

教程:在 Apifox 中将消息通知集成到钉钉、飞书等应用

Apifox 支持将「消息通知」集成到第三方应用平台&#xff0c;包括企业微信、钉钉、飞书、Webhook 和 Jenkins。具体可在项目的【项目设置 -> 通知设置 -> 外部通知】里新建一个通知事件&#xff0c;然后在弹出的界面中配置即可。 在配置界面可以选择需要的触发事件&#…

如何在WordPress中启用两因素身份验证?

在WordPress中启用两因素身份验证方法&#xff1a;安装和激活WordFence安全性、启用两因素验证。 使用您可以从任何位置登录的任何门户&#xff0c;建议启用两个因素身份验证以增加帐户的安全性。 这样&#xff0c;即使有人可以正确猜测你的密码&#xff0c;它们仍然需要获得2…

诸葛智能携手五大银行,以数据驱动的营销中台带来可预见增长

对于银行来说&#xff0c;客户是赖以生存的基础&#xff0c;也是保持活力的关键。尤其是大数据、人工智能等新兴技术的推动下&#xff0c;通过数据赋能产品升级和服务创新&#xff0c;深挖客户潜能&#xff0c;更是助推银行快步迈入高质量发展的新阶段。 在银行加速拥抱新质生…