最近在开发过程中，遇到了watch同样的写法在父子组件里面监听ref对象表现不一致的问题，记录一下。

在父组件里面要取得变化后的值，直接使用下面方法即可拿到

watch(date, (newVal) => {

console.log(newVal)

})

但在子组件里面，要取得与父组件同样的value值，需要走函数内部的监听才能拿到

watch(() => props.date, (newVal) => {

console.log(newVal)

})

父组件

<template>
  <child :date="date" />
  <div @click="change" />
<template>
<script lang="ts">
  import { defineComponent, watch } from 'vue'
  export default defineCompoent({
   setup(){
    let date = ref('')
    watch(date, (newVal)=> {
     console.log(newVal) // 直接打印date的值
    })
    const change = () => {
     date.value = Date.now()
    }
    return {
     date
    }
   }
  })
</script>

子组件

<script lang="ts">
 import { defineComponent, watch } from 'vue'
  export default defineCompoent({
   props: {
    date: {
      type: String,
      default: ''
    }
   },
   setup(props){
    let date = ref('')
    watch(props.date, (newVal)=> {
     console.log(newVal) // 打印的是一个ref对象
    })
    watch(() => props.date, (newVal)=> {
     console.log(newVal) // 打印的是值
    })
    const change = () => {
     date.value = Date.now()
    }
    return {
     date
    }
   }
  })
</script>