事件发射器与在 AngularJs 中更新大型数据集时的$watch

Event emitters vs $watch when updating large data sets in AngularJs

本文关键字:数据集 watch 大型 更新 发射器 AngularJs 事件      更新时间:2023-09-26

我遇到过这样一种情况:我经常需要更新一个大型数据集,该数据集最终将呈现在分析应用程序的表中。在给定集合大小的情况下,保持观察者对数据的效率似乎非常低,而当我知道数据已更新并传递新数据时,我可以发出一个事件。

我读到在 Angular 应用程序中使用事件发射器通常是反模式的,但似乎从来没有一个可靠的解释来解释为什么。

在触发更新方面,这里的最佳实践是什么?

没有元理想的答案,我们需要查看您的 HTML 以了解这些观察程序是如何注册的。

基本上,如果你的桌子是这样的

<tr ng-repeat="line in table.lines">
  <td ng-repeat="column in line.columns">
    <!-- many watchers such as -->
    {{column.value}}
  </td>
</tr>

假设你不想在知道它已经改变之前观看每个column.value,那么你可以绑定一次该值(需要角度 1.3+ 或外部绑定库)

<tr ng-repeat="line in table.lines">
  <td ng-repeat="column in line.columns track by column.timestamp">
    <!-- bind data once -->
    {{::column.value}}
  </td>
</tr>

当该单元格值更改时,请更新其时间戳。仅在这种情况下,trackBy 才会重置td内容。

但是,这是以每次更改值时替换 DOM 单元为代价的。仅针对仅刷新单元格值但在每个单元格上使用观察程序进行基准测试(如果观察程序足够快,即没有jquery的短同步代码等,这并不总是一个问题)。