Vue watch监听使用的几种方法

一、watch使用的几种方法

1、 通过 watch 监听 msg 数据的变化。

watch: {
   msg(oldValue, newValue) {
       console.log(oldValue)
       console.log(newValue)
   }
}

2、通过 watch 监听 obj数据的变化。（深度监听 deep）

data（） {
   return {
       obj: {
           'name': "赵",
           'age': 18
       },
   }
},
watch: {
   obj: {
       handler(oldValue,newVal) {
            console.log(oldValue)
            console.log(newValue)
       },
       deep: true  // 深度监听
   }
}

3、通过 watch 监听 data 数据的变化，数据发生变化时,执行 change 方法

watch: {
   data： 'change' // 值可以为methods的方法名
}，
methods: {
   change(oldVal,newVal){
console.log(oldVal,newVal)
}
}

二、watch中的immediate与handler和deep属性

1、immediate属性

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

2、handler属性

watch中需要具体执行的方法

3、deep属性

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听，数组字符串一般不需要

data（） {
   return {
       obj: {
           'name': "王",
           'age': 18
       },
   }
},
watch: {
   obj: {
       // 执行方法
       handler(oldValue,newVal) {
            console.log(oldValue)
            console.log(newValue)
       },
       deep: true, // 深度监听
       immediate: true  // 第一次改变就执行
   }
  // 如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：
   'obj.name': {
       // 执行方法
       handler(oldValue,newVal) {
            console.log(oldValue)
            console.log(newValue)
       },
       deep: true, // 深度监听
       immediate: true  // 第一次改变就执行
   }
}

来源：https://blog.csdn.net/weixin_48780364/article/details/128389267