在Angular中，我们经常需要实时监听某个数据是否发生了变化，并且根据变化的情况来做出相应的处理。为了实现这一功能，Angular提供了多种监测数据变化的方法，本文将详细介绍其中的三种方式：$watch、ng-change和ng-checked，并分析它们各自的优缺点，以及适用场景和使用技巧。
$watch
$watch是Angular中最常用的一种数据变化监听方式之一，它可以对数据模型中的某一个或多个属性进行监听，并在属性值发生变化时执行相应的回调函数。$watch使用非常灵活，可以通过字符串形式指定要监听的属性名，也可以直接传入一个函数，该函数返回需要监听的属性值。同时，$watch还支持第三个参数，用于比较新旧值是否相同，从而决定是否触发回调函数，默认情况下$watch会对对象和数组进行引用比较，对基本类型进行值比较。
$watch的示例代码如下：
--------------------- ------------------ --------- - ----------------- ------- ---- - - -------- - - -- - - ---------- ---
ng-change
ng-change是Angular提供的一种专门用于响应表单元素（如input、select等）值变化的监听方式。它与$watch的区别在于，ng-change只能监听表单元素的值变化，而不是数据模型中的属性变化。当表单元素的值发生变化时，ng-change会触发相应的表达式或函数。
ng-change的示例代码如下：
------ ----------- --------------- ------------------------- ----------------- - ---------- - ----------------- ------- -- - - ------------- --
需要注意的是，ng-change只在用户交互（比如输入文本、选择选项等）导致表单元素的值发生变化时才会触发，如果是通过程序直接修改表单元素的值，则不会触发ng-change事件。
ng-checked
ng-checked是Angular提供的一种专门用于响应复选框和单选框状态变化的监听方式。与ng-change类似，ng-checked也只能监听表单元素的状态变化，而不是数据模型中的属性变化。当复选框或单选框状态发生变化时，ng-checked会触发相应的表达式或函数。
ng-checked的示例代码如下：
------ --------------- ------------------ --------------------------- ------------------ - ---------- - -------------------- ------ -- - - ---------------- --
需要注意的是，ng-checked只有在表单元素被点击或者通过JavaScript设置选中状态时才会触发，如果是通过修改数据模型中的属性值来改变表单元素的状态，则不会触发ng-checked事件。
优缺点分析
$watch、ng-change和ng-checked各有优缺点，选择合适的监听方式需要根据具体的业务需求来决定。
$watch的优点在于它非常灵活，可以对任何数据模型中的属性进行监听，并且可以通过传入自定义比较函数来满足更加复杂的比较需求。但是，由于$watch是基于Angular的脏检查机制实现的，如果要监听的对象比较大或者嵌套比较深，就可能导致性能问题。
ng-change和ng-checked的优点在于它们专门用于响应表单元素的值和状态变化，因此适用于表单相关的场景。此外，由于它们
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25405