关于watch监听器

我们在使用属性监听watch属性时都知道，只有在改变这个值时才会触发watch函数的触发，
但有些情况我们希望首次就触发watch这时候我们就会用到handler函数与immediate属性代码如下

data  ()  {
return{
  name:'简书小白'
  }
},
watch:{
  name:{
        handler(newName,oldName){
            console.log(newName,oldName)
        }
        immediate:true //设置true之后则改变调用name中函数为handler方法并会在首次执行
    }
}

这就是watch高级用法， 当然我们偶尔还会用到deep深度监听，我们明天再继续讲deep

首先，我们要知道 watch可以监听到属性的变化从而触发函数做一些相应的操作，那么当我们改变的值是引用类型时例如

<script>
export default {
  name: 'App',
  data  ()  {
    return{
        obj:{
          name:'简书'
        }
      }
    },
  mounted(){
    setTimeout(() => {
        this.obj.name='知乎'
    }, 1000);
  },
  watch:{
    obj:{
        handler:'changeobj', //通过handler方法将逻辑抽离避免代码臃肿
    }
  },
  methods:{
    changeobj(newName, oldName){
        console.log(newName, oldName)
    }
  }
}
</script>

watch是不会触发的，由于众所周知的原因，Vue监听不到对象深层的变化，那我们应该怎么样触发呢

答案如下

<script>
export default {
  name: 'App',
  data  ()  {
    return{
        obj:{
          name:'简书'
        }
      }
    },
  mounted(){
    setTimeout(() => {
        this.obj.name='知乎'
    }, 1000);
  },
  watch:{
    obj:{
        handler:'changeobj', //通过handler方法将逻辑抽离避免代码臃肿
        deep:true //这个就是我们今天的重点 deep属性
    }
  },
  methods:{
    changeobj(newName, oldName){
        console.log(newName, oldName)
        //这里就会正常去打印
    }
  }
}
</script>

deep属性就是用来这样子