AngularJS 中的 $watch 和 $observe 的区别

在 AngularJS 中，$watch 和 $observe 都是用来监控指令或作用域变量的变化的方法。但它们之间还是有一些不同的。

$watch

$watch 是 $scope 中的一个方法，它可以监控一个表达式的变化。当被监控的表达式的值发生改变时，$watch 将调用指定的回调函数。$watch 还可以指定比较函数，以决定新旧值是否相等。

示例代码：

$scope.$watch('expression', function(newValue, oldValue) {
  // do something
});

$observe

$observe 是在指令中使用的一个方法，它用来监控指令的属性（attribute）的变化。当被监控的属性的值发生改变时，$observe 将调用指定的回调函数。$observe 只能监控字符串类型的属性。

示例代码：

link: function(scope, element, attrs) {
  attrs.$observe('attribute', function(newValue, oldValue) {
    // do something
  });
}

区别

下面是 $watch 和 $observe 的一些区别：

1. $watch 监控表达式的变化，$observe 监控属性的变化；
2. $watch 可以监控作用域中的变量，$observe 只能监控指令的属性；
3. $watch 不能在指令中使用，$observe 只能在指令中使用；
4. $watch 可以监控任意类型的表达式，$observe 只能监控字符串类型的属性。

因此，$watch 和 $observe 的使用场景是不同的，需要根据具体情况进行选择。一般来说，如果需要监控作用域中的变量的变化，或者监控任意类型的表达式的变化，就应该使用 $watch；如果需要监控指令的属性的变化，就应该使用 $observe。

参考资料：

• AngularJS $watch 和 $observe 的区别
• Understanding $watch and $observe in AngularJS