deferEvaluation和extend之间的ko.computed有什么区别({deferred:true})

Question

我对ko.computed变量定义的延迟计算的行为解释有点困惑.

这样的计算变量可以用属性deferEvaluation:true定义,它应该将评估推迟到任何其他属性要求变量值的时刻(参见http://knockoutjs.com/documentation/computed-reference.html),

当通过extend({deferred:true})扩展常规ko.computed变量时,它会异步调用计算并推迟它,直到所有当前运行的"线程"结束(参见http://knockoutjs.com/documentation/deferred-updates.html) .

这两个设置听起来非常相似,但每个设置都完全不同.

任何人都可以向我确认我是对的,或者如果我弄错了解释差异吗？

Answer 1

deferEvaluation只是推迟初步评估.通常,当您创建一个计算,其评估被称为右然后,同步,这意味着(除其他事项外),所有这取决于观测的必须已经初始化.使用deferEvaluation阻止,并且第一次调用计算机的evalutor函数时,第一次发生任何订阅计算(或从不,如果没有).在那之后,它没有进一步的效果; 每当它依赖于变化的任何东西时,立即重新评估计算.

.extend({deferred: true})大约总是推迟评估的执行,直到创建或更改它完成(然后通常会在接下来UI更新之前)的任务后.它不仅仅是关于初始评估,它意味着每次计算的可观察量取决于变化时,允许通过使计算的评估异步(在当前任务之后)并等待它们稳定来解决这些变化.

这是一个显示既不使用它们,使用deferEvaluation和使用的片段.extend({deferred: true}).请注意调用赋值程序时的差异.

setTimeout(function() {
  console.log("---- Using neither:");
  var ob1 = ko.observable(10);
  console.log("creating c1");
  var c1 = ko.computed(function() {
    console.log("c1 evaluated");
    return ob1() * 2;
  });
  console.log("Setting ob1 to 20");
  ob1(20);
  console.log("subscribing to c1");
  c1.subscribe(function(newValue) {
    console.log("c1's new value is " + newValue);
  });
  console.log("Setting ob1 to 30");
  ob1(30);
  console.log("Setting ob1 to 40");
  ob1(40);
}, 50);

setTimeout(function() {
  console.log("---- Using .extend({deferEvaluation: true}):");
  var ob2 = ko.observable(10);
  console.log("creating c2");
  var c2 = ko.computed(function() {
    console.log("c2 evaluated");
    return ob2() * 2;
  }, null, { deferEvaluation: true });
  console.log("Setting ob2 to 20");
  ob2(20);
  console.log("subscribing to c2");
  c2.subscribe(function(newValue) {
    console.log("c2's new value is " + newValue);
  });
  console.log("Setting ob2 to 30");
  ob2(30);
  console.log("Setting ob2 to 40");
  ob2(40);
}, 200);

setTimeout(function() {
  console.log("---- Using .extend({deferred: true}):");
  var ob3 = ko.observable(10);
  console.log("creating c3");
  var c3 = ko.computed(function() {
    console.log("c3 evaluated");
    return ob3() * 2;
  }).extend({ deferred: true });
  console.log("Setting ob3 to 20");
  ob3(20);
  console.log("subscribing to c3");
  c3.subscribe(function(newValue) {
    console.log("c3's new value is " + newValue);
  });
  console.log("Setting ob3 to 30");
  ob3(30);
  console.log("Setting ob3 to 40");
  ob3(40);
}, 400);

.as-console-wrapper {
  max-height: 100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>