watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用
watch第一个参数监听源
watch第二个参数回调函数cb（newVal,oldVal）
watch第三个参数一个options配置项是一个对象{
immediate:true //是否立即调用一次
deep:true //是否开启深度监听
}

监听Ref 案例

  1. import { ref, watch } from 'vue'
  3. let message = ref({
  4.   nav:{
  5.     bar:{
  6.       name:""
  7.     }
  8.   }
  9. })
  12. watch(message, (newVal, oldVal) => {
  13.   console.log('新的值----', newVal);
  14.   console.log('旧的值----', oldVal);
  15. },{
  16.   immediate:true,
  17.   deep:true
  18. })

监听多个ref 注意变成数组啦

  1. import { ref, watch ,reactive} from 'vue'
  3. let message = ref('')
  4. let message2 = ref('')
  6. watch([message,message2], (newVal, oldVal) => {
  7.   console.log('新的值----', newVal);
  8.   console.log('旧的值----', oldVal);
  9. })

监听Reactive

使用reactive监听深层对象开启和不开启deep 效果一样

  1. import { ref, watch ,reactive} from 'vue'
  3. let message = reactive({
  4.     nav:{
  5.         bar:{
  6.             name:""
  7.         }
  8.     }
  9. })
  12. watch(message, (newVal, oldVal) => {
  13.     console.log('新的值----', newVal);
  14.     console.log('旧的值----', oldVal);
  15. })

案例2 监听reactive 单一值

  1. import { ref, watch ,reactive} from 'vue'
  3. let message = reactive({
  4.     name:"",
  5.     name2:""
  6. })
  9. watch(()=>message.name, (newVal, oldVal) => {
  10.     console.log('新的值----', newVal);
  11.     console.log('旧的值----', oldVal);
  12. })

————————————————
版权声明：本文为CSDN博主「小满zs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq1195566313/article/details/122797990