在AngularJS中，$observe和$watch都是用来监测数据变化的方法，但它们有着不同的使用场景和机制。本文将详细介绍这两种方法的异同，以及如何选择合适的方式来实现你想要的功能。
$observe方法
$observe是用来监测指令属性的变化的。当指令的属性值发生改变时，$observe会立即执行回调函数。$observe方法只能用于监测字符串类型的属性，例如class、style、src等等。
下面是一个例子，通过$observe方法监测指令中的class属性变化：
---- ------------ --------------------------
---------------------------- -------- -- -
------ -
--------- ----
----- -------- ------- -------- ------ -
----------------------- -------- ---------- -
------------------ ------- -- - - ----------
---
-
--
---当myClass变量的值发生改变时，控制台会输出相应的信息。需要注意的是，使用$observe方法时，属性名需要加上前缀$。
$watch方法
$watch是用来监测作用域变量的变化的。当作用域变量的值发生改变时，$watch会立即执行回调函数。$watch方法可以监测任意类型的变量，包括对象、数组等等。
下面是一个例子，通过$watch方法监测作用域变量myVar的变化：
------------ - ------- -------- ---------------------- -------- ---------- - ------------------ ------- -- - - ---------- ---
当myVar变量的值发生改变时，控制台会输出相应的信息。
区别与适用场景
$observe和$watch最大的区别在于它们所监测的数据类型不同。$observe可以用于监测指令中的字符串属性的变化，而$watch用于监测作用域中的变量的变化。
另外，$observe方法只能用于监测指令属性的变化，而$watch方法可以监测任意类型的变量，包括作用域中的变量、服务等等。因此，如果你需要监测作用域中的变量，那么就需要使用$watch方法。
但是，$observe方法具有更高的优先级，即当指令中的属性值发生改变时，$observe方法会先于$watch方法执行。因此，在指令中需要监测属性的变化时，建议使用$observe方法。
总结
$observe和$watch都是用来监测数据变化的方法，但它们有着不同的使用场景和机制。$observe方法用于监测指令中的字符串属性的变化，而$watch方法用于监测作用域中的变量的变化。需要根据不同的需求选择合适的方法来实现功能。
示例代码： https://codepen.io/ChatGPT/pen/Rwzgxzy
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25004