简单介绍JS的watch

介绍JS 里面的watch
watch函数其实是有三个变量的,第一个参数是需要监视的对象,第二个参数是在监视对象发生变化时需要调用的函数,实际上watch还有第三个参数,它在默认情况下是false。
当第三个参数是false时,其实watch函数监视的是数组的地址,而数组的内容的变化不会影响数组地址的变化,所以watch函数失灵了。
用法(主要是讲监听数组)
1、当要监听数组的时候,需要把第三个参数设置为true。这样watch监听的就是数组的内容,而不是地址
2、监听对象时,可以忽略第三个参数

1var array = [{name:"p1"},{name:"p2"}];
//这个是普通的js监听

//这个是angular的监听(其实angular的双向数据绑定就是利用了watch,一直监听着)
$scope.$watch("array",function(oldValue,newValue){
    //you can do what you want
},true);
2var object ={name:"p3"};
//这个是普通的js监听
object .watch("name",function(oldValue,newValue){

})
//事件监听
var person = document.getElementById('btn');
person.click = function() {
     alert("hello world!");
}
//或者
document.getElementById("btn").onclick = function(){
     alert("hello world!");
}
//这个是angular 的监听
$scope.$watch("object",function(oldValue,newValue){
    //you can do what you want
})

object.watch(prop, handle)
概述:监听一个对象的某个属性是否发生变化,如果发生了变化,则立即执行回调函数
object.unwatch(prop)
概述:取消监听事件
更多关于javascript 的事件可以查看
http://www.jb51.net/article/93752.htm

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中,`watch`是一个用于监听数据变化的特性。通过`watch`,我们可以在数据发生变化时执行相应的操作。 `watch`有两种使用方式:一种是监听某个具体的数据变化,另一种是监听整个对象的变化。 1. 监听具体数据变化: 我们可以通过在Vue实例中使用`watch`属性来定义一个或多个`watcher`,并指定要监听的数据和对应的回调函数。当指定的数据发生变化时,Vue会自动调用相应的回调函数。 例如: ```javascriptdata() { return { message: 'Hello', }; }, watch: { message(newVal, oldVal) { console.log('message发生了变化:', newVal, oldVal); }, }, ``` 在上述代码中,我们创建了一个名为`message`的数据,并在`watch`中监听了该数据的变化。当`message`发生变化时,回调函数会被触发,并打印出新值和旧值。 2. 监听整个对象的变化: 除了监听具体数据的变化外,我们还可以使用`deep`属性来监听整个对象的变化。当对象内部的任何属性发生变化时,都会触发回调函数。 例如: ```javascriptdata() { return { userInfo: { name: 'Alice', age:20, }, }; }, watch: { userInfo: { handler(newVal, oldVal) { console.log('userInfo发生了变化:', newVal, oldVal); }, deep: true, }, }, ``` 在上述代码中,我们创建了一个名为`userInfo`的对象,并在`watch`中监听了该对象的变化。通过设置`deep: true`,当`userInfo`内部的`name`或`age`属性发生变化时,回调函数会被触发。 使用`watch`可以灵活地对数据变化作出响应,执行一些额外的逻辑操作,例如发送请求、更新其他数据等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值