首页watch监听新旧值

watch监听新旧值

时间: 2023-11-03 19:02:37 浏览: 83

Angular中使用$watch监听object属性值的变化(详解)

在Angular框架中，$watch是用于监听模型(model)变化的内置方法，主要用于检测作用域(scope)对象属性的变化，并根据这些变化执行相应的逻辑处理。不过，$watch默认是基于引用的比较，当监听一个对象时，由于对象引用没有改变，所以它默认不会响应对象内部属性值的变化。这就引出了我们在监听对象属性变化时需要特别注意的一些知识点。 ### $watch监听对象属性变化的原理在Angular中，$watch可以监视作用域上的某个表达式或属性的变化。当我们指定一个对象给$watch时，Angular会监视该对象的引用是否发生变化，而不是监视对象内部属性的变化。因此，如果对象内部属性发生了变化，但对象的引用未变，$watch默认不会触发。 ### 常见的$watch用法在Angular中，$watch的常见用法之一是监听作用域上的某个表达式的值是否发生了变化： ```javascript $scope.$watch('person', function(newVal, oldVal) { // 执行某些操作 }); ``` 在上面的例子中，我们通过字符串'person'来引用作用域上的对象，当`person`对象引用变化时，$watch监听的函数会被触发。 ### 监听对象内部属性的变化如前文所述，$watch默认不监听对象内部属性的变化，因为对象的引用没有变。为了监听对象内部属性的变化，我们可以向$watch传递一个额外的布尔参数，该参数指明是否使用深度比较： ```javascript $scope.$watch('person', function(newVal, oldVal) { // 执行某些操作 }, true); ``` 当第三个参数设为`true`时，Angular会使用`angular.equals`函数来比较`newVal`和`oldVal`。`angular.equals`是一个深度比较函数，可以正确处理对象内部属性值的变化，这样我们就可以监听到对象内部属性的改变了。 ### $watch的完整使用方式 $watch方法的完整签名如下： ```javascript $watch(watchExpression, listener, [objectEquality]); ``` - `watchExpression`：需要监视的表达式或函数。 - `listener`：当监视的表达式的值发生变化时调用的回调函数。 - `objectEquality`：布尔值，当其为`true`时，Angular会使用`angular.equals`来比较新旧值是否相等。 ### 实例说明假设我们有一个作用域对象`$scope.person`，并且我们希望监听这个对象的`name`属性的变化。由于$watch默认不会监听对象内部属性，我们需要使用深度比较： ```html <body> <div ng-controller="mainCtrl"> <input id="myText" type="text" ng-model="person.name"/> <h2>{{person}}</h2> <h2>Status: {{status}}</h2> </div> <script> angular.module('myApp', []) .controller('mainCtrl', function($scope){ $scope.person = { name: "allen", age: 21 }; $scope.$watch('person', function(n, o) { if (n == o) { return; } $scope.status = "changed"; }, true); }); </script> </body> ``` 在这个例子中，我们为`person`对象的`name`属性绑定了一个输入框。当我们在输入框中修改`person.name`时，`person`对象的引用实际上并没有改变，但是内部属性`name`改变了。通过设置`$watch`的第三个参数为`true`，Angular能够检测到`person.name`的改变，并触发回调函数，将`status`变量设置为"changed"。 ### 注意事项使用`$watch`监听对象内部属性变化时，需要注意以下几点： - 深度监听对象会消耗更多的性能，特别是在对象较大或者监听的对象较多时。 - 考虑到性能因素，应当只在必要时使用深度监听。 - 如果要监听的对象属性经常改变，应当谨慎考虑是否有必要使用深度监听，或者寻找更优的实现方式。 ### 结语通过上文的解释和示例代码，我们可以看到Angular中如何使用$watch来监听对象内部属性的变化，包括$watch的使用方法、原理以及性能上的考虑。正确使用$watch可以让我们对作用域数据的变化做出准确及时的响应，从而构建出更加动态和响应式的Web应用。希望本文对您在使用Angular进行Web开发时有所帮助，也期待您继续关注我们，获取更多技术分享和更新。

根据提供的引用，当使用Vue中的watch监听对象或数组的变异时，新值和旧值将指向相同的引用，因为它们都指向同一个对象或数组。Vue不会保留变异之前值的副本。因此，如果想要得到不同的值，可以结合计算属性来实现。可以设置一个计算属性来保存对象或数组的副本，并监听这个副本的变化。请注意，引用中还提到了watch的作用是监控一个值的变换，并在变化时调用相关的方法，可以动态改变关联的状态。问题回答完毕。

阅读全文