• vue的diff算法


    vue的diff算法

    diff算法是做什么的?

    vue中diff算法称为patching算法,由Snabbdom修改而来,虚拟dom想要转换成真实dom则需要通过patch方法转换;

    diff算法的必要性

    在vue1.x中每个依赖均有更新函数对应,因此不需要虚拟dom和patching算法支持,但是由于粒度过细,导致vue1.x无法承受较大应用,因此在vue2.x中为了降低watcher粒度,每个组件只有一个watcher与之对应,此时就需要patching算法才能精确找到发生变化的位置并高效更新。
    简而言之就是为了提升页面性能,精准高效更新

    diff算法何时执行

    执行时刻是组件内响应式数据变更触发实例执行其更新函数时,更新函数会再次执行render函数获得最新的虚拟dom,然后执行patch函数,并传入新旧两个虚拟dom,通过对比找到变化的地方,最后将其转换为对应DOM操作

    diff算法具体执行方式

    patch过程是一个递归的过程,遵循深度优先同层比较的策略;以vue3为例:
    1、先判断两个节点是否为相同同类节点,不同则删除重建
    2、如果双方都是文本,则更新文本内容
    3、如果双方都是元素节点则递归更新子元素,同时更新元素属性
    4、更新子节点又分几种情况:
    1)新的子节点是文本,老的子节点是数组则清空,并设置文本
    2)新的子节点是文本,老的子节点也是文本则直接更新文本
    3)子节点是数组,老的子节点是文本,则清空文本,并创建新子节点数组中的子元素
    4)新的子节点是数组,老的子节点也是数组,那么比较两组子节点,更新细节

    vue3中的优化

    vue2中是双端算法,先尝试从开头结尾去寻找相同节点,如找到直接做优化做比对,
    vue3中引入的更新策略:编译期优化patchFlags、block等

  • 相关阅读:
    做了这么多的请求和响应,你知道都干了些啥吗?
    sql常见坑(更新中)
    redis集群-主从复制
    基于QT 写json并且UDP发送
    2022-05-21每日一题
    VTK----深入理解3D坐标系统和相机
    python(10)
    同源策略和跨域问题
    校园二手交易系统(源码+开题)
    ROS2系列知识(3):环境配置
  • 原文地址:https://blog.csdn.net/weixin_42178670/article/details/127893565