VUE中watch监听器怎么用

小编给大家分享一下VUE中watch监听器怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

侦听器一般来说是用来监听数据的变化，默认是在数据发生变化时执行。

监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值。

在vue中，使用watch来响应数据的变化，关于watch的用法大致有三种。

1、下面代码是watch的一种简单的用法

2、immediate 立即监听

使用watch基本用法时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

watch: {  firstName: {    handler(newName, oldName) {      this.fullName = newName + ' ' + this.lastName;    },    { immediate: true }  }}

监听的数据后面写成对象形式，包含handler方法和immediate，上面简单的写法我们写的函数其实就是在写这个handler方法、默认省略而已。

3、handler方法

    
        
Number: {{ myNumber }}
        
Number: 
    
//handler方法就是你watch中需要具体执行的方法

4、 deep属性

对于对象或者对象中的属性，我们如何监听？那么就介绍deep属性。它的作用就是解决这个问题的关键。

 
    
obj.a: {{obj.a}}
    
obj.a: 
   

上面的代码如果不加deep:true 那么console中就不会执行，只执行第一次，输出结果为undefined

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到。

这个时候就可以使用deep深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样消耗过大。

以上是"VUE中watch监听器怎么用"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！