[前端]vue中watch监听

vue中的watch监听主要分为以下几种：
1.普通监听

watch: {
  msg(val,oldVal) {
    console.log(val,oldVal);
  }
}

2.立即监听
在立即监听中会使用到immediate属性。
需要注意：immediate属性是需要搭配handler方法一起使用的。

watch: {
  msg: {
    handler(val,oldVal) {
      console.log(val,oldVal);
    },
    immediate:true
  }
}

3.深度监听
深度监听常常会被用于监听一个对象的改变时，使用deep属性。普通的watch方法是无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化。为了解决这个问题就需要对对象进行深度的监听。
注意：如果监听的数据是一个对象，那么immediate: true属性就是失效。

watch: {
  obj: {
    handler(val,oldVal) {
      console.log(val,oldVal);
    },
    deep:true
  }
}

如果监听的数据不是一个对象，就可以使用immediate属性。例如：

watch: {
  "obj.age": {
    handler(val,oldVal) {
      console.log(val,oldVal);
    },
    deep:true,
    immediate:true
  }
}