javascript - 为什么 subview 模型中的函数会导致父 View 模型中的函数触发？

Question

这是此 one 的后续问题:

在下面的代码中，func 是一个绑定(bind)到父级 div 的简单函数。当然，它会在文档加载时触发，但也会在按下按钮时触发。

正如对链接问题的回答所解释的那样，我认为只有当 func 是一个 computed 时才会发生这种情况(因为它的值会在任何时候重新计算它依赖的 observables 已更改)，但我现在看到它发生在一个简单的函数中。

为什么？

var MasterViewModel = function () {
  var self = this;
  self.nested = new FirstViewModel();
  self.func = function() {
    var items = self.nested.array();
    alert("executed");
  };
}
var FirstViewModel = function () {
  var self = this;
  self.array = ko.observableArray([]);
  self.push = function () {
    self.array.push(new SecondViewModel());
    alert("pushed");
  }
}

var SecondViewModel = function () {
  var self = this;
  self.z = ko.observable();
}

var mvm = new MasterViewModel();
ko.applyBindings(mvm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
  <div data-bind="value: func()">
     <div data-bind="with: nested">
       <button data-bind="text: 'push me', click: push"></button>
     </div>
  </div>

Answer 1

KO 使用可观察对象(如您所知)。当您为绑定(bind)值提供 表达式 而不仅仅是对可观察对象的引用时，KO 在应用绑定(bind)时有效地将表达式包装在计算中。所以这个:

<div data-bind="value: func()"></div>

...实际上与此相同:

<div data-bind="value: computed"></div>

...KO 在幕后创建 computed 是这样的:

computed = ko.pureComputed(function() {
    return func();
});

并且由于 func 使用可观察的 self.nested.array 的值，KO 的更改跟踪在计算计算值时会看到并记住这一事实，因此它知道在 self.nested.array 更改时重新计算计算值。