javascript - $watch 与 ngChange

Question

假设您想要在 $scope 的属性更改时执行某些操作。并说此属性绑定(bind)到 input 字段。使用 $watch 与使用 ngChange 有哪些优点/缺点？

html

<input ng-model="foo" ng-change="increment()">
<p>foo: {{foo}}</p>

<!-- I want to do something when foo changes.
     In this case keep track of the number of changes. -->
<p>fooChangeCount: {{fooChangeCount}}</p>

js

// Option 1: $watch
$scope.$watch('foo', function() {
  $scope.fooChangeCount++;
});

// Option 2: ngChange
$scope.fooChangeCount = 0;
$scope.increment = function() {
  $scope.fooChangeCount++;
};

http://plnkr.co/edit/4xJWpU6AN9HIp0OSZjgm?p=preview

我知道有时您需要使用 $watch(如果您要查看的值未绑定(bind)到输入字段)。我知道有时候您需要使用 ngChange(当您想要响应输入的变化但不一定响应范围属性变化时)。

但是，在这种情况下，两者都完成了同样的事情。

我的想法:

• ngChange 看起来更干净，也更容易理解正在发生的事情。
• $watch 看起来可能稍微快一点，但可能可以忽略不计。使用 ngChange，我认为 Angular 必须在编译阶段做一些额外的工作来设置事件监听器，并且额外的事件监听器可能会降低速度。无论您是否使用 ngChange，摘要循环都会在更改时运行，因此您有机会监听某些内容并调用函数来响应更改。

Answer 1

底线 - 你可以用 $watch 实现所有你可以用 ng-change 实现的事情，但反之则不行。

目的:

ngChange - binded to a HTML element

$watch - observing scope's model objects (HTML object models included)

我的经验法则——如果你可以使用 ng-change 来匹配你的场景，否则使用 $watch

为什么不应该使用 $watch？

1. 效率低下 - 增加您的 $digest 的复杂性
2. 很难有效地进行测试
3. 不干净