vue中的diff算法
发布日期:2022-03-15 19:30:48
浏览次数:6
分类:技术文章
本文共 402 字,大约阅读时间需要 1 分钟。
什么是diff算法
diff算法就是进行虚拟节点对比,并返回一个patch对象
用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom 而Vue3只比较发生变化的节点 当节点一旦发生改变 会给一个变量 效率大大提高diff算法的两个特点
- 比较只会在同层级进行, 不会跨层级比较
- 在diff比较的过程中,循环从两边向中间比较
Diff算法的步骤:
- 用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文 档当中
- 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff),记录两棵树差异
- 把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch),视图就更新了
二、比较方式
diff整体策略为:深度优先,同层比较
1.比较只会在同层级进行, 不会跨层级比较
2.比较的过程中,循环从两边向中间收拢转载地址:https://blog.csdn.net/weixin_58102387/article/details/122814294 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年04月09日 11时25分53秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
手把手教你IDEA使用GIT进行项目管理
2019-04-27
Ubuntu 默认 root 密码修改
2019-04-27
IDEA 安装JUnitGenerator V2.0 插件 帮助生成单元测试
2019-04-27
GitHub与GitLab的区别
2019-04-27
Ubuntu Docker 安装
2019-04-27
SpringBoot+EHcache实现缓存
2019-04-27
设计模式 过滤器模式
2019-04-27
shiro springboot 整合
2019-04-27
Git常用命令总结
2019-04-27
设计模式 组合模式
2019-04-27
Navicat远程服务器2013-Lost connection to MYSQL server at 'reading for initial communication packet' 公钥
2019-04-27
设计模式 装饰器模式
2019-04-27
设计模式 外观模式
2019-04-27
Spring Boot 热启动
2019-04-27
设计模式 享元模式
2019-04-27
MyBatis 如何传递参数(全)
2019-04-27
HTTP状态码
2019-04-27
通过xml文件解锁word
2019-04-27
随笔-Python批量调整图片大小
2019-04-27
网络安全-利用sniffer抓包软件,分析IP头的结构(详解)
2019-04-27