vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数:就是当你监控的数据变化时需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。 值也可以是函数名:不过这个函数名要用单引号来包裹。  值也可以是包括选项的对象:选项包括有三个:第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。

第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)

第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

下面就介绍下watch的使用中,遇到的问题,如:vue如何实现首次不触发watch,vue如何实现数据的深度监听?

1、vue实现首次不触发watch:

vue中watch特点是:根据当前组件中的初始值来进行判断的,我们在初始化的时候,如果监听的值修改了,此时watch就会被触发,实现方法如下:

1、在初始化值后面添加:this.$watch('a', this.fn),这样首次赋值是不会触发fn的,只有后面的会触发,例如:created: function() {

//初始化修改值

this.$watch('data',this.fn)

}

methods: {

fn() {

//触发

},

}

2、使用immediate: true;这个属性,默认为false。其值代表是否以当前的初始值执行handler的函数,例如:watch:{

"data":{

immediate:true,

handler:function(){

//执行代码

}

}

}

2、vue如何实现数据的深度监听

一般情况下,使用watch的监听,只是浅监听,如下就监听不到对象下age的变化:let obj = {name: 'fly', child: {age: 1}};

这里要实现深度监听,就需要上面介绍的属性deep:true。如下:watch: {

"data":{

handler:function() {

//这里如果不使用箭头函数,需要注意this的指向

},

deep: true //深度监听

}

}

Logo

前往低代码交流专区

更多推荐