javascript - 当 $scope.$watch 表达式依赖于多个变量时会发生什么？

Question

如果在我的 Controller 中，我有类似的内容:

$scope.service = Service;

$scope.$watch('service.properties[service.selectedProperty]', function(newVal,oldVal){});

这里发生了什么？ service.properties 和 service.selectedProperty 都可以更改。 watch 最终会同时观看 service.properties 和 service.selectedProperty 吗？

我已经对此进行了测试，当任一变量发生变化时， watch 似乎都会执行，这正是我想要的。我想知道以这种方式使用 .$watch 是否会产生任何意想不到的后果，以及它实际上是如何工作的。

Answer 1

Does the watch end up watching both service.properties and service.selectedProperty?

事实上，它两者都没有，只是观察整个表达式的计算结果。我解释一下:

Angular watch 使用脏检查原则:如果表达式作为一个整体被评估为与上次评估时不同的内容，则发生了更改，并且运行了关联的处理程序。 (当您使用 $watch 形式时，这种行为更加明显，该形式将函数作为其第一个参数 - 返回要监视的值。)

这意味着技术上可能存在这样一种情况，即service.properties[service.selectedProperty]的评估与以前相同，但是service.properties，关联对象，和 service.selectedProperty，属性键同时更改(或其中之一) - 然而，表达式被计算为是相同的。在这种情况下，不会触发更改事件。

例如，给定:

var myObj = {
    a: 123,
    b: 123
};
var key = 'a';

即使将 key 更改为 'b'，表达式的值 myObj[key] 将保持不变 而不是 'a'。

只要表达式的计算结果是相同的，从 Angular Angular 来看，什么都没有改变。对于大多数意图和目的，这对您来说也不重要 - 如果确实如此，则您的监视表达式设置不正确，并且您可能想要监视更通用的表达式。