knockout.js - 普通 javascript 函数和计算函数之间的淘汰差异

Question

看来我可以用两种方式在我的视图模型上编写一个函数，结果相同。

普通的javascript函数：

vm.Texts = function () {
  var self = vm;
  if (self.selectedFormat()) {
    return self.selectedFormat().Texts();
  }
};

ko 计算：

vm.Texts = ko.computed(function () {
  var self = vm;
  if (self.selectedFormat()) {
    return self.selectedFormat().Texts();
  }
});

'vm' 是视图模型，而 selectedFormat 是视图模型上的 observable。在这两种情况下，当 selectedFormat 更改时，都会触发该函数。所以我的问题是这两种方法有什么区别？

score 4 · Accepted Answer

我假设沿着这些方向进行数据绑定：

<span data-bind="text: Texts()"></span>

底线：
在这两种情况下，textselectedFormat绑定都会对初始渲染产生依赖。

详细信息：
您的两种情况都会更新，span因为：

功能案例。绑定将text在初始渲染时注意到对selectedFormat可观察对象的依赖，因为它在您的函数中被调用。如果 observable 发生变化，它将在 KO 的寄存器中找到该依赖关系并触发text绑定更新。依赖项如下所示：

text binding --> depends-indirectly-on --> selectedFormat

看到这个小提琴。
计算案例。第二种情况可能会起作用，尽管它稍微更明显一些，因为Texts现在依赖于一个（计算的）可观察对象，该可观察对象充当可观察对象的中介selectedFormat。现在的依赖是：

text binding --> depends-on --> Texts computed --> depends-on --> selectedFormat

看到这个小提琴。

1 回答 1