What is the difference on ko.computed between deferEvaluation and extension ({deferred: true})

Question

I'm a little confused by the explanation of the deferred calculation behavior defined in the ko.computed variable .

Such a computed variable can be defined using the deferEvaluation: true property , which should defer evaluation until another property requests the value of the variable (see http://knockoutjs.com/documentation/computed-reference.html ).

When the ko.computed regular variable extends to extend ({deferred: true}) , it invokes asynchronous computation and defers it until all current "threads" have completed (see http://knockoutjs.com/documentation/deferred -updates.html ).

These two settings sound very similar, but each one does something completely different.

Can someone confirm to me that I am right or explain the difference if I am wrong?

Answer 1

deferEvaluation . , , , , ( ), , , . deferEvaluation evalutor , ( , ). ; - , , .

.extend({deferred: true}) , , , ( , , ). , , , , , ( ) .

, , 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 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 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 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>

Hide result

Answer 2

deferEvaluation ( ) , - . ( ) . " ", , , , /. pureComputed (http://knockoutjs.com/documentation/computed-pure.html).

extend({deferred: true}) / / . , / , ( ). , .

, (ko.options.deferUpdates = true) ko.pureComputed .