KnockoutJSのcomputedにおける依存関係の仕組み for v.2.2.1

この記事はQiitaの記事をエクスポートしたものです。内容が古くなっている可能性があります。

以下のように、computed（dependentObservable）のevaluateImmediateは作られた際とそれを関数呼び出しした際に呼ばれる。

var x = ko.observable(1);
var y = ko.observable(2);

// 1回目
var sum = ko.computed(function(){
	return x() + y();
});

// 2回目
console.log(sum());

evaluateImmediateが呼ばれると、内部でko.dependencyDetection.beginが呼ばれる。 beginが呼ばれた後に、ko.computedでdependentObservableを作った際に渡した関数（上記の例だとxとyを足している関数）を呼び出す。 この関数内(readFunction)で、依存しているobservableが呼び出される。上記の例では、x()とy()が実行されている。 observableの値の読み出しが行なわれると、ko.dependencyDetection.registerDependencyが呼び出される。 ko.dependencyDetection.registerDependencyでは、最後にbeginして、endが呼び出されていない依存関係のチェーンに対して、呼び出されたobservableを追加している。 上記の例では、xとyがsumで作られた依存チェーンに登録される。 evaluateImmediate内でendが呼び出されると依存チェーンの登録対象から外れる。

このように、computedが依存している、obsearvableを検知して依存関係を構築している。