vue3 监听ref和props中的数据

在Vue3中，可以使用`watch`函数来监听`ref`和`props`中的数据。`watch`函数的第一个参数可以是一个响应式的数据源，比如`ref`、`reactive`等，也可以是一个函数。当监听的数据源发生变化时，`watch`函数会自动重新运行。

以下是一个监听`ref`和`props`中数据变化的例子：

import { watch, ref } from 'vue';

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

    watch(propValue, (newValue, oldValue) => {
      console.log('Prop Value changed:', newValue);
    });

    watch(() => props.propValue, (newValue, oldValue) => {
      console.log('Props Value changed:', newValue);
    });

    return { propValue };
  }
};

在上面的例子中，我们使用`ref`函数创建了一个响应式的数据源`propValue`，并将其初始化为`props.propValue`。然后，我们使用`watch`函数分别监听了`propValue`和`props.propValue`的变化，并在控制台输出了变化后的值。