一：首先，什么情况下使用watch?

（1）当我们需要实时监听一个值的变化，这个值的变化会对其他的值产生影响，或者这个值的变化会改变一些业务逻辑。

（2）不同于computed,watch监听的值不会依赖于其他的值，或者说它自己本身就是被依赖的值

（3）watch监听的值需要提前定义，而computed不需要

二：什么情况下使用深度监听：

当你需要监听一个对象内部属性的变化，并且这个对象可能是嵌套的，这时候就需要使用深度监听。也就是说对象的属性下面如果还有嵌套属性，就需要深度监听。

基本使用：

三、在vue2中使用watch普通监听：监听的函数接收两个参数，第一个参数是最新的值newValue；第二个参数是输入之前的值newValue；

watch: {
// 当message变化时，这个函数就会被调用
message(newValue, oldValue) {
console.log(`message changed from ${oldValue} to ${newValue}`);
}
}
vue2中使用watch对整个对象进行深度监听：

watch: {
// 默认情况下我们的监听器只会针对监听的数据本身的改变(内部发生的改变是不能监听)

info: {
handler: function(newInfo, oldInfo) {
console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name);
},
deep: true, // 深度监听
immediate: true // 立即执行
}
}

当只需要对对象内部的某个属性进行深度监听时：

data(){

return {

     user: {
       name: 'Alice',
       age: 30,
       contact: {       //count属性依然是一个对象
              email: 'alice@example.com',
              phone: '1234567890'
}
}

}

}

//对user下面的count属性进行深度监听

watch: {
       'user.contact': {
       handler: function (newVal, oldVal) {
      // 这里处理user.contact对象的变化
      console.log('Contact info changed:', newVal);
},
deep: true
}
}
当user.contact对象内部的属性发生变化时，handler函数会被触发，并输出新的值。设置deep: true允许你深度监听嵌套对象的变化。

四、vue3使用watch普通监听：watch本身就是一个函数，第一个参数是监听的对象

const message=ref('请求成功')

watch(message,(newValue,oldValue)=>{

console.log(newValue,oldValue)

})

vue3使用watch深度监听:

const obj=reactive({

'name':'博客园'，

‘age’:{

    'num':10

}

})

监听obj中age的变化：

watch( () => obj.age, (newVal, oldVal) => { // 做点什么 } )

或者也可以age下面的num属性的变化：

watch( () => obj.age.num, (newVal, oldVal) => { // 做点什么 } )

五、vue3中数组监听：

watch(([p1,p2],(newValue,oldValue))=>{

})

六、vue3中watchEffect的使用：

watchEffect类似于一个生命周期函数，在打开页面的时候默认加载，等同于vue2中的immediate,监听的值发生变化的时候也会执行。