Angular JS $watch 与 $on

Posted 2023-03-11

【中文标题】Angular JS $watch 与 $on

【英文标题】：Angular JS $watch vs $on

【发布时间】：2014-06-26 23:57:28

【问题描述】：

每当父作用域中的状态发生变化时，我想在指令中执行一个函数。

实现这一点的明显方法是使用事件广播 ($broadcast) 和侦听器 ($on)。

我很好奇使用 $watch 是否可以替代事件广播。如果是，两者如何比较？

据我了解，每个 $digest 循环都会评估要监视的表达式。 那么事件比观看更有效吗？

【问题讨论】：

What is 'cheaper' performance-wise $broadcast or $watch的可能重复

【参考方案1】：

$watch 函数用于观察作用域上的变量。范围继承还允许您查看父范围变量，因此这绝对是您的用例的方式。 正如您所说的那样，$on 用于监视事件，您可以将其 $broadcast 用于子范围或 $emit 用于父范围。这为您提供了更多控制权，但在编码时可能会导致更多错误，因为您可以从您不监视并忘记通知侦听器的点获取范围变量的更新。

当您不继承范围变量时，您仍然可以使用事件。但注意不要污染大范围，使用服务可能是一种选择，因为您会立即看到它是否被注入。

由于指令获得了它所在的范围（或继承自它），我想说$watch 在这里是一个更简洁的选择。

如果你想在你的指令上有一个独立的范围，你可以传递参数作为属性和$observe他们。

【讨论】：

这个解释很清楚，但是我漏掉了重点——“但要注意不要污染大范围”，你的意思是不要污染太多的事件吗？

当您通过事件在完全独立的控制器/指令之间进行通信时，它们都必须具有您正在广播的公共父范围。在大多数情况下，这将是 $rootScope。在大型应用程序中，您最终会在 rootscope 上产生许多事件，并且您将无法控制哪个组件订阅哪个事件，而使用依赖注入（以及用于通信的服务）您可以立即看到它，并且更容易测试/调试。

只要您通过服务保持对广播事件的严格控制——无论如何这应该是最佳实践——我认为与手表相比，性能节省比其他一切都重要。至少在有大量 $watches（显式或隐式）的页面上。至少你应该做一个 watch count chk 看看你属于哪个阵营。