最小依赖图重新计算值算法-唐霜

大家好呀，好久没有写正式的文章了，有点生【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。疏了。最近完成了一个库的PoC，在最近一【原创不易，请尊重版权】未经授权，禁止复制转载。期的《Robust》里面也有介绍到，你有本文版权归作者所有，未经授权不得转载。【作者：唐霜】听最近一期的《Robust》吗？这个库叫【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。sfcjs，sfc即single fil【版权所有，侵权必究】【本文首发于唐霜的博客】e component的缩写，你写过vu原创内容，盗版必究。【转载请注明来源】e的话，肯定知道vue的.vue后缀文件本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。的写法，对的，就是这个家伙。

在这个库中，我基于依赖收集做响应式更新，【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net整个视图被提前建立一个树状结构，并且有一【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】个依赖收集的列表，每次被依赖的响应式数据【本文首发于唐霜的博客】【作者：唐霜】发生变化，就去遍历每个节点，检查每个节点【转载请注明来源】本文版权归作者所有，未经授权不得转载。的依赖是否有这个变化的数据，如果有，就更本文版权归作者所有，未经授权不得转载。【作者：唐霜】新当前这个节点。sfcjs里面没有用vi【转载请注明来源】本文作者：唐霜，转载请注明出处。rtual dom，更新只针对当前节点，【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。所以效率肯定会比react vue都高。

在这个机制里面，有一个场景是，一个响应式【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】数据可能依赖了另外一个响应式数据，例如：

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

let a = 1
let b = a + 5

【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

let a = 1
let b = a + 5
let c = a + b + 3
let d = c + 9
let e = a * 4
let f = 10
let g = f + a + c + 2
let h = a + d + 6
let i = g + d

它们之间的依赖关系如下：【作者：唐霜】

基于这个图，我们可以看到所有这些变量之间【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。的依赖关系，这个可以被称为“全依赖图”。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。但是，在我们的代码中，虽然声明了这些变量【作者：唐霜】【未经授权禁止转载】，但是我们真正在视图中，可能并没有全部用【版权所有】唐霜 www.tangshuang.net【转载请注明来源】到，我们可能只用到了bcdfg这几个，可【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。以发现，我们实际的依赖图比这个“全依赖图本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。”要小，但是，虽然我们只依赖了bcdfg【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。，但是实际上，a这个变量也被依赖了。所以【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net，最终的“最小依赖图”是这样：

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【作者：唐霜】

现在，我们回到编程的思路中来，假设我们的著作权归作者所有，禁止商业用途转载。【转载请注明来源】一个节点依赖了c和g，此时，我们要如何编本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】程，才能在代码层面让我们的这个节点在a发原创内容，盗版必究。未经授权，禁止复制转载。生更新时更新节点内容呢？

【转载请注明来源】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

我们来看看一些框架是怎么做的吧。转载请注明出处：www.tangshuang.net

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【作者：唐霜】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

先看看angularjs：本文版权归作者所有，未经授权不得转载。

$scope.$watch('a', () => {
  $scope.c = $scope.b + $scope.a + 3
})

$scope.$watch('b', () => {
  $scope.c = $scope.b + $scope.a + 3
})

$scope.$watch('a', () => {
  $scope.b = $scope.a + 5
})

// ... 省略其他依赖关系梳理

可以看到在angualrjs中我们没有办【原创内容，转载请注明出处】原创内容，盗版必究。法直接表达依赖关系，只能通过$watch【转载请注明来源】本文作者：唐霜，转载请注明出处。来在某个值发生变化时，做一个计算，从而使原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。另外一个值发生变化。angularjs基著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】于脏检查机制去处理这些属性，关于脏检查机【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】制，我在之前的一篇文章本文作者：唐霜，转载请注明出处。中有解释过，这里就不再赘述。总之，你会发【本文受版权保护】【原创不易，请尊重版权】现，这里的所有watch函数，都要执行好【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】多次。

【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【本文首发于唐霜的博客】

再来看看vue里面：【本文首发于唐霜的博客】

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

export default {
  data() {
    return {
      a: 1,
      f: 10,
    }
  },
  computed: {
    b() {
      return this.a + 5
    },
    c() {
      return this.a + this.b + 3
    },
    d() {
      return this.c + 9
    },
    g() {
      return this.a + this.c + this.f + 2
    },
  },
}

原创内容，盗版必究。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】

看上去完美对么？但是，如果你深入了解过v【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ue的计算属性的实现原理，你可能会发现，【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。它的依赖计算本质上还是watcher（在【转载请注明来源】本文作者：唐霜，转载请注明出处。vue3中已经重构，不再使用这种方案），本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】通过对a的监听，来重新计算bcdg。但是【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。，你有没有发现，当a发生变化的时候，c要未经授权，禁止复制转载。【未经授权禁止转载】重新计算一次，而此时，b也会重新计算一次【作者：唐霜】原创内容，盗版必究。，b的重新计算，又会导致c再重新计算一次本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】，也就是说，a的变化，会让c计算两次。

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】

但是，这完全没有必要对吗？【作者：唐霜】

有没有一种方法，可以让这些基于依赖的重新【本文受版权保护】【转载请注明来源】计算只执行一次呢？有的。

我们现在重新去分析angular和vue【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。里面的问题所在，或许也是整个设计上的无奈原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net。就是我们无法在一开始就知道c依赖ab的未经授权，禁止复制转载。【转载请注明来源】同时，b也依赖a。也就是说，bc这两个都【作者：唐霜】【未经授权禁止转载】依赖a的计算属性是割裂的，所以，每次重新本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。计算值的时候，它们只能自己单独计算，而这【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。种割裂就导致c在a变时计算一次，b变时再【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】计算一次。

原创内容，盗版必究。【原创内容，转载请注明出处】未经授权，禁止复制转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。

怎么办呢？著作权归作者所有，禁止商业用途转载。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【本文受版权保护】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

我们建立一种计算的优先级等级机制来完成重【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。新计算。也就是说，这次，我们不是所有的b原创内容，盗版必究。原创内容，盗版必究。cdg平等的大家都来计算一次自己，而是有【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。一个基于优先级的等级划分，通盘考虑，统筹【版权所有】唐霜 www.tangshuang.net【作者：唐霜】规划。

在这种等级划分中，我们确定哪些变量先重新【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net计算，哪些后重新计算，也就是分批计算。而未经授权，禁止复制转载。【本文首发于唐霜的博客】这个分批次的算法，就是本文的重点。先按住【原创内容，转载请注明出处】原创内容，盗版必究。不讲。通过这个分批之后，每个变量我只需要【原创不易，请尊重版权】【本文受版权保护】计算一次。我们先用我们的眼睛来统筹规划一【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。下，上面的最小依赖图中，我们可以这样划分【版权所有，侵权必究】【未经授权禁止转载】批次：

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

af|b|c|dg

第一批是af，第二批是b，第三批是c，第原创内容，盗版必究。【本文首发于唐霜的博客】四批是dg。按照这个顺序分批计算，只需要转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。计算一次，我就能让所有的值都更新到正确的转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。值。你可以自己去验证一下，是不是这样。

原创内容，盗版必究。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

这是怎么做到的呢？你可以这样思考，比如我【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】们拿c举例，如果a发生变化的时候，马上去【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】重新计算c，紧接着，b也会由于a变而发生著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】变化，c还需要再计算一次才能得到正确结果【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net。既然如此，我们就可以在一开始的时候，不转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。计算c，而是在b变化的时候再计算c。

等一等！！【转载请注明来源】

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【原创内容，转载请注明出处】【未经授权禁止转载】

这里的表述是错误的，在分批的这种思想下，著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net根本不是“b变化”引起的“再计算c”这个【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net过程，而是无论b有没有变化，都会再计算c本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】，分批计算的核心就在于，每一个变量都需要【本文受版权保护】原创内容，盗版必究。重新计算。比如再计算c的时候，我根本不需【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。要考虑说是a变了还是b变了，我只要确保在【原创内容，转载请注明出处】【未经授权禁止转载】b后面再计算c，那么c的值就一定是正确的著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】。

【本文受版权保护】【未经授权禁止转载】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】

不要忘记了，在前面的依赖收集中，我们的c本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。收集到了自己依赖ab，d是最惨的只收集到【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。自己依赖c，但这都不要紧。因为我们是分批著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】计算的，比如说，我们现在f这个变量变了，【本文首发于唐霜的博客】【版权所有，侵权必究】a没有变，从前面的依赖图我们知道，实际上【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】只需要g重新计算就可以了，但是我们程序不【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。知道啊，我们得用算法去告诉程序。怎么办呢转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】？

【本文受版权保护】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

在开始分批计算时，我创建一个临时列表，用著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】来保存哪些变量发生变化了，比如上面这个例【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。子，在第一批（也就是发生变化的变量这一批【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】），我记录了f，没有记录a。进入下一批计【转载请注明来源】转载请注明出处：www.tangshuang.net算时，b依赖了a但是在这个临时列表里面没【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。有a，所以我b不重新计算，再下一批，c依【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】赖ab，但是这两个家伙都不在列表里，所以【原创内容，转载请注明出处】【未经授权禁止转载】c也不重新计算，接下来d也是一样，c不在【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】列表里，d也不重新计算，g依赖了acf，【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net其中f在列表里，所以g要重新计算。怎么样原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net，虽然我们仍然是分批来的，但是，最终整个【本文受版权保护】原创内容，盗版必究。过程我们只重新计算了g。

基于这个算法，我们实际上不需要去提炼最小原创内容，盗版必究。【本文首发于唐霜的博客】依赖图，而可以直接用全图，因为即使我上全未经授权，禁止复制转载。原创内容，盗版必究。图，但是最后的计算量也只局限于需要重新计【未经授权禁止转载】未经授权，禁止复制转载。算的哪些变量而已。这样，我们就省去了从全【关注微信公众号：wwwtangshuangnet】【作者：唐霜】图找出最小依赖图的这个过程，省了一些性能原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net。

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

好了，接下来是揭秘怎么实现分批的算法。【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

我们还是用图来说话吧。【原创内容，转载请注明出处】

首先，我们将最小依赖图进行拆解，变成这样【作者：唐霜】【未经授权禁止转载】：

原创内容，盗版必究。【本文受版权保护】【本文首发于唐霜的博客】【原创内容，转载请注明出处】

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

找出只存在于左边而不存在于右边的变量，作转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。为一批，放入分批列表的第一组中

著作权归作者所有，禁止商业用途转载。

转载请注明出处：www.tangshuang.net

本文作者：唐霜，转载请注明出处。

【未经授权禁止转载】

将刚才使用过的依赖线划掉【转载请注明来源】

【未经授权禁止转载】

未经授权，禁止复制转载。

原创内容，盗版必究。

【本文首发于唐霜的博客】

本文版权归作者所有，未经授权不得转载。

按照上面这个步骤，我们找到了只存在于左边【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net的a和f，有了第一批af然后把这些使用过的依赖线划掉：本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】原创内容，盗版必究。

接下来，就只剩下了3条线。然后我们继续按未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net照上面的步骤，重新来过：

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【本文受版权保护】

找出只存在于左边而不存在于右边的变量，作本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。为一批，放入分批列表的第一组中

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

【关注微信公众号：wwwtangshuangnet】

原创内容，盗版必究。

将刚才使用过的依赖线划掉原创内容，盗版必究。

【未经授权禁止转载】

【本文受版权保护】

【作者：唐霜】转载请注明出处：www.tangshuang.net【本文受版权保护】

这次我们只划掉了一条线，并且找到了第二批【本文首发于唐霜的博客】【本文受版权保护】，和前面的批次连起来得到 af|d。接下来，我们再来一次：【作者：唐霜】

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【作者：唐霜】

找出只存在于左边而不存在于右边的变量，作著作权归作者所有，禁止商业用途转载。【本文受版权保护】为一批，放入分批列表的第一组中

【本文首发于唐霜的博客】

【关注微信公众号：wwwtangshuangnet】

将刚才使用过的依赖线划掉转载请注明出处：www.tangshuang.net

【原创不易，请尊重版权】

【本文受版权保护】

【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。【作者：唐霜】【未经授权禁止转载】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】

这次我们划掉了两条，并找到了第三批，得到【转载请注明来源】本文版权归作者所有，未经授权不得转载。 af|d|c 。原创内容，盗版必究。

此时，我们的所有线都被划掉了，但是我们的转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。分批队列里面不对劲呀，还有一些变量不在这原创内容，盗版必究。【原创不易，请尊重版权】里面。没有关系，我们把所有变量做一次fi本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】lter，把哪些还不在队列里面的全部找出著作权归作者所有，禁止商业用途转载。【转载请注明来源】来，作为最后一批加入到队列最后面，得到 af|b|c|dg。为什么可以这样呢？因为那些最后还不在队【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net列里面的变量是依赖上一次被划掉的依赖的，【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net而被划掉之后就代表没有依赖了，所以，这些【未经授权禁止转载】原创内容，盗版必究。剩下的家伙一定是最后一批去算的，而且都是【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net在这一个批次。

以上就是建立依赖图分批的算法，从代码实现【本文受版权保护】著作权归作者所有，禁止商业用途转载。上看，其实也非常简单，你可以自己实现一下原创内容，盗版必究。原创内容，盗版必究。试试。

【原创不易，请尊重版权】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】转载请注明出处：www.tangshuang.net【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【未经授权禁止转载】【本文受版权保护】【转载请注明来源】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【原创内容，转载请注明出处】【未经授权禁止转载】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【原创内容，转载请注明出处】【本文受版权保护】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【本文首发于唐霜的博客】【转载请注明来源】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【版权所有，侵权必究】

2021-09-12 4443

唐霜

最小依赖图重新计算值算法

为价值买单，打赏一杯咖啡

声明

关于

生态