AngularJS $watch vs $on

在AngularJS中，$watch和$on都是用于监视数据变化的方法。它们的主要区别在于它们的用途和实现方式。

$watch

$watch是最常用的监视数据变化的方法之一。它可以监视表达式或者函数的返回值，并在监听到变化时执行相应的回调函数。

用法

$scope.$watch('value', function(newValue, oldValue) {
  // 监听到value的变化，执行回调函数
});

深度监听

默认情况下，$watch只会比较被监视的对象的引用，如果是同一个对象，即使它的属性值发生了变化也不会触发回调函数。如果要进行深度监听，需要将第三个参数设置为true。

$scope.$watch('obj', function(newValue, oldValue) {
  // 监听到obj的变化，执行回调函数
}, true);

性能注意事项

由于$watch会在每次$digest循环中都被调用一次，因此在作用域中定义过多的$watch会导致性能问题。为了避免这种情况，可以使用$watchCollection来代替$watch。$watchCollection只会比较集合的长度和每个元素的值是否相等，而不会比较每个元素的引用。

$on

$on是用于处理事件的方法。它可以监听一个事件并在事件触发时执行相应的回调函数。

用法

$scope.$on('eventName', function(event, args) {
  // 处理事件
})

触发事件

要触发事件，可以使用$emit或者$broadcast方法。$emit会向上级作用域广播事件，而$broadcast会向下级作用域广播事件。

$scope.$emit('eventName', args);     // 向父级作用域发送事件
$scope.$broadcast('eventName', args); // 向子级作用域发送事件

取消事件监听

如果要取消事件监听，可以使用$off方法。

var removeListener = $scope.$on('eventName', function(event, args) {
  // 处理事件
});
removeListener(); // 取消事件监听

总结

$watch和$on都是AngularJS中非常重要的方法。$watch主要用于监视数据变化，而$on则用于处理事件。在实际开发中，根据具体需求选择合适的方法可以有效地提高应用程序的性能。

示例代码：https://codepen.io/anon/pen/qwWJqE

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28731