当前位置:首页 > 算法 > 正文

vue2diff算法详解

  • 算法
  • 2024-07-09 15:18:54
  • 6045

diff策略: 通俗来讲就是通过某种策略找到新旧两种数据状况的不同来实现最小量更新的办法,其实diff的本质是希望实现最小量的更新,也就是说对于给定的两组新旧节点,他们的变化能够diff策略察觉到,并且以尽可能小的代价去更新他们,而不是全部清除后,重新基于新的状态去创建。双端比较算法是vue2.x采用的diff算法,本篇文章只是对双端比较算法粗略的过程进行了一下分析,具体细节还是得Vue源码,Vue的源码在这过程假设当前有两个数组arr1和arr2 let arr1 = [1,2,3,4,5]let arr2 = [4,3,

双端diff 算法顾名思义, 双端就是从两端开始分别向中间进行遍历对比的算法。在双端diff 中,分为五种比较情况: 新旧相等新旧尾相等旧等于新尾旧尾等于新四者互不相等其中,前四种属于比较理想的情况,而第五种才是最复杂的对比情况。所谓diff 算法,就是通过比对新旧两个虚拟节点不一样的地方,对那些不一样的地方进行新增或更新或删除作。接下来详细介绍节点更新的过程。首先进行静态节点处理,判断新旧两个虚拟节点是否是静态节点,如果是,就不需要进行更新作,可以直接跳过更新比对的过程。再更新处理新老节点的属性,获取新老节点的子节点,然后进行一定规则的判断。这里值得多说一下的是,Vue2 在更新元素属性的时候,是力全量

1.新增元素2.减少元素以上就是详解Vue2的diff算法的详细内容,更多关于Vue2的diff算法的资料请关注其它相关文章!【资料图】vue2的diff过程比较方式:同级比较,不会跨级比较以下源码来自vue/,会有一些提取,相关函数会附上链接。【相关推荐:vuejs教