如何在Vue3中使用watch监控一个对象的属性值

watch的基本用法

watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数

第一个参数：侦听源，侦听源可以是一下几种

一个函数，返回一个值一个 ref一个响应式对象（reactive）或是由以上类型的值组成的数组
第二个参数：侦听源发生变化时要触发的回调函数。

(newValue, oldValue) => { /* code */}

当侦听多个来源时，回调函数接受两个数组，分别对应源数组中的新值和旧值

( [ newValue1, newValue2 ] , [ oldValue1 , oldValue2 ]) => {/* code */}

第三个参数：可选对象，可以支持一下这些选项

immediate：侦听器创建时立即触发回调deep：如果源是一个对象，会强制深度遍历，以便在深层级发生变化时触发回调函数flush：调整回调函数的刷新时机onTrack / onTrigger：调试侦听器的依赖

watch的监听示列

<script lang="ts" setup>
  // 接受父组件传递的数据
  const props = defineProps({
    test: {
      type: String,
      default: ''
    }
  })
   
  // 使用 watch 侦听 props 中的 test 属性
  watch(
    // 这种写法不会侦听到 props 中 test 的变化
    props.test,
    () => {
      console.log("侦听成功")
    }
  )
   
  watch(
    // 这种写法会侦听到 props 中 test 的变化
    () => props.test,
    () => {
      console.log("侦听成功")
    }
  )
</script>