美文网首页
你怎么理解vue中的diff算法?

你怎么理解vue中的diff算法?

作者: Viewwei | 来源:发表于2021-03-10 23:08 被阅读0次

diff算法是虚拟 DOM 的必然产物,通过新旧虚拟 DOM 对比,将变化的地方更新在真实 DOM 上,另外也需要 diff 高效的执行对比过程,从而降低时间复杂度
vue2中为了降低 watcher 力度,每个组件只有一个 watcher 与之对应,只有引入 diff 才能精确的找到发生变化的地方
diff 之所以发生变化,是引入组件数据的变化调用了 set 方法,导致 watcher能够监控到数据的变化,导致其触发 updateComponent 中 pathVnode方法,在 pathVnode 函数中对对比上一次渲染结果和新渲染结果.两个节比较的过程就是发生diff的过程.整个更新过程叫做 path 过程,也叫打补丁的过程
diff 过程整体遵从深度优先,同层比较的策略;两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同的操作.比较两组节点是算法的重点.首先假设头尾节点相同做 4 次比较尝试,如果这 4 中方式都没有找到,就按照通用方式遍历查找.查找结束在按照情况处理剩下的节点;借助 key,通常可以精确的找到相同的节点,因此整个 path 过程是非常高效的

相关文章

  • 第十七天

    1.你怎么理解vue中的diff算法? diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比(即dif...

  • 你怎么理解vue中的diff算法

    diff算法不是vue专用 必要性,lifecycle.js - mountComponent() 执行方式,pa...

  • 你怎么理解vue中的diff算法?

    diff算法是虚拟 DOM 的必然产物,通过新旧虚拟 DOM 对比,将变化的地方更新在真实 DOM 上,另外也需要...

  • 怎么理解vue中的diff算法?

    源码分析1:必要性,lifecycle.js - mountComponent() 组件中可能存在很多个data中...

  • sammary

    vue-diff算法 react 性能优化 diff算法 ,局部更新DOMshouldComponentUpdat...

  • 理解vue2.x之diff算法

    了解diff算法前,应该先了解虚拟DOM(VNode),在vue中是先创建VNode,再通过diff算法看哪个节点...

  • Vue2.0的Diff算法

    原文:解析Vue2.0的Diff算法 Vue2.0加入了Virtual Dom,Vue的Diff位于patch.j...

  • VueDiff算法的简单分析和一些个人思考

    Diff算法是Vue视图动态改变的核心算法之一 本文包括对Diff算法的简单概括,和我闲的难受对Diff算法的一些...

  • 9. diff算法的理解

    diff算法的理解

  • 理解Vue2.5中diff算法

    vue是现在主流前端框架之一,采用了很多高级特性,如虚拟DOM,那么它是如何批量更新的,我们一起来了解下。 数据变...

网友评论

      本文标题:你怎么理解vue中的diff算法?

      本文链接:https://www.haomeiwen.com/subject/sybgqltx.html