vue3 setup 如何watch defineProps？

最近写一个vue单文件的组件时遇到了监听失败的问题，总结一下：

一、直接解构defineProps

子组件 Child.vue

"vue": "^3.4.15"

<template>
    <h1>子组件</h1>
    <div>{{count}}</div>
</template>
<script setup>
import {watch} from 'vue'
const {count,data} = defineProps(['count','data'])
 
watch(
  () => count,
  () => {
    console.log('watch count=', count)
  },
  {
    deep: true,
    immediate: true,
  }
)
watch(
  () => data.count,
  () => {
    console.log(' watch data=', data.count)
  },
  {
    deep: true,
    immediate: true,
  }
)
</script>

父组件 Parent.vue

<template>
    <h1>父组件</h1>
    <Child count={count}/>
    <button @click="onClick">点击</button>
</template>
<script setup>
import {ref,reactive} from 'vue'
import Child form './Child.vue'
const count = ref(0)
const data = reactive({count:0})
const onClick = ()=>{
    count.value = count.value + 1
    data.count = data.count + 1
}
</script>

结果:

1. 页面可以渲染出count 和 data.count
2. watch 只能监控到data.count的变化

二、使用props

子组件 Child.vue

<script setup>
import {watch} from 'vue'
const props = defineProps(['count','data'])
watch(
  () => props.count,
  () => {
    console.log('watch count=', count)
  },
  {
    deep: true,
    immediate: true,
  }
)
watch(
  () => props.data.count,
  () => {
    console.log(' watch data=', data.count)
  },
  {
    deep: true,
    immediate: true,
  }
)
</script>

结果:

1. 页面可以渲染出count 和 data.count
2. watch 可以监控到props.count 和 props.data.count的变化

三、使用 torefs 结构 props

子组件 Child.vue

<script setup>
import {toRefs,watch} from 'vue'
const props = defineProps(['count','data'])
const {count,data} = toRefs(props)
watch(
  () => count,
  () => {
    console.log('watch count=', count.value)
  },
  {
    deep: true,
    immediate: true,
  }
)
watch(
  () => data.count,
  () => {
    console.log(' watch data=', data.count)
  },
  {
    deep: true,
    immediate: true,
  }
)
watch(
  () => data,
  () => {
    console.log(' watch data=', data.value)
  },
  {
    deep: true,
    immediate: true,
  }
)
</script>

结果:

1. 页面可以渲染出count 和 data.count
2. watch 可以监控到count的变化,但是不能监测到data.count
3. 此时count和data转换为了ref类型count和data的值需要用.value 读取出来