$ watch vs. ngChange

Question

假设您想要在$scope更改属性时执行某些操作.并说这个属性绑定到一个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(如果您要观看的值未绑定到输入字段).我理解有时你​​需要使用ngChange(当你想要做一些事情来响应输入的变化,但不一定是为了响应范围属性的变化).

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

我的想法:

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

Answer 1

底线 - 你可以用$ watch来实现你可以通过ng-change实现的每件事,但反之亦然.

用途:

ngChange - 绑定到HTML元素

$ watch - 观察范围的模型对象(包括HTML对象模型)

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

为什么你不应该使用$ watch？

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