diff算法简析

diff算法的核心目的是用最少的步骤找出新旧节点的差异,从而更新视图。

diff算法是一种通过同层的树节点进行比较 的高效算法,探讨的是虚拟DOM树发生变化后,生成DOM树更新补丁的方式。对比新旧两株虚拟DOM树的差异,将更新补丁作用于真实DOM,以最小成本完成视图更新。

原理:当数据发生改变时,set方法会调用Dep.notify通知所有订阅者watcher,订阅者就会调用patch给真实的DOM打补丁,更新相应的视图。

Vue 2的diff算法:双端指针比较法

Vue 2中采用的是双端指针比较法 。这种算法通过比较新旧节点的属性,找出需要更新的部分 。虽然效率不错 ,但在处理复杂场景时可能会有些吃力。

Vue 3的diff算法:最长递增子序列比较法

Vue 3在diff算法上做了改进,仍然使用双端比较法 ,但增加了最长递增子序列的比较方式 。这种方式在处理复杂场景时更加高效,能够减少不必要的计算。

React的diff算法:向右移动的比较法

React的diff算法与Vue有所不同。它采用了一种向右移动的比较方法 ,通过比较新旧节点的键值对来找出差异 。这种算法在处理大型应用时表现优异,但也有其局限性。

patch函数和patchVnode函数

在前端开发中,patch函数和patchVnode函数 是常见的操作。patch函数用于将虚拟节点(vnode)与实际DOM元素进行绑定或更新。而patchVnode函数则用于处理虚拟节点之间的差异。

addVnodes和removeVnodes函数
addVnodes和removeVnodes函数 用于添加或移除虚拟节点。在更新视图时,这两个函数会根据新旧节点的差异来决定是否需要添加或移除节点。

updateChildren函数
updateChildren函数 是处理子节点更新的关键函数。它根据新旧节点的差异来更新子节点,确保视图的一致性。

相关推荐
qetfw20 分钟前
Bash 函数与流程控制:read、if、for、case 验证
linux·前端·javascript·bash
鬼手点金1 小时前
从 API 消息到模型 Token:Chat Template
java·前端·javascript·数据库·人工智能·深度学习·1024程序员节
Shadow(⊙o⊙)1 小时前
LangChain 自定义工具全解析:从 @tool 到 bind_tools 的完整调用链路
java·服务器·前端·1024程序员节
小poop2 小时前
HTML 基础入门:从结构到常用标签详解
前端
jiangliushi62 小时前
GPT-6.1 Sol 免费用:PowerShell 装 Codex 报“禁止运行脚本 npm.ps1”?一条命令解决
前端·gpt·npm
计算机魔术师2 小时前
日均500万亿词元,国内推理速度翻倍却仍落后国外——差距卡在哪
前端
excel2 小时前
用 Node.js 搭建一套可持续获客的 SEO 内容系统:前端工程师 30 天实战方案
前端·后端
yma162 小时前
从零搭建 P2P 聊天室:yma16.cloud 在线工具实战
前端·1024程序员节
Mr.Pascal3 小时前
Javascript之什么是作用域?
javascript·1024程序员节