vue watch 第一次不执行_vue watch监听对象的使用_实现首次不触发、深度监听

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 //深度监听

}

}