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

1. 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
2. 第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
3. 第三个是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 //深度监听
   }
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/578