vue3 watch监听props

在 Vue 3 中，可以使用 `watch` 函数来监听 `props` 的变化。

首先，在组件的 `setup` 函数中，需要通过 `props` 参数获取到传入的属性值。然后，使用 `watch` 函数来监听 `props` 的变化。

以下是一个示例代码：

<template>
  <div>
    <p>传入的属性值：{{ propValue }}</p>
  </div>
</template>

<script>
import { watch, ref } from 'vue'

export default {
  props: {
    propValue: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const propValue = ref(props.propValue)

    watch(() => props.propValue, (newValue, oldValue) => {
      propValue.value = newValue
      console.log(`属性值从 ${oldValue} 变为 ${newValue}`)
    })

    return {
      propValue
    }
  }
}
</script>

在这个例子中，我们定义了一个 `propValue` 的属性，并且使用了 `watch` 函数来监听 `props` 的变化。当 `propValue` 的值发生变化时，会触发 `watch` 函数的回调函数，并且将新的值和旧的值作为参数传入。在回调函数中，我们将新的值赋值给了 `propValue`，并且输出了属性值的变化信息。