vue3 props 数据改变

在Vue 3中，当父组件的props数据发生变化时，子组件的props数据并不会自动更新。这是因为Vue 3中的props是只读的，子组件不能直接修改父组件传递的props数据。如果你想在子组件中响应props数据的变化，你可以使用watch来监听props的变化，并在回调函数中更新子组件的data数据。

下面是一个示例代码，演示了如何在Vue 3中响应props数据的变化：

<template>
  <div>
    <p>父组件传递的props数据: {{ propData }}</p>
    <p>子组件的data数据: {{ childData }}</p>
  </div>
</template>

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

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

    watch(() => props.propData, (newValue) => {
      childData.value = newValue;
    });

    return {
      childData
    };
  }
};
</script>

在上面的代码中，我们使用了Vue 3的`watch`函数来监听props数据的变化。当props数据发生变化时，回调函数会被触发，并将新的props值赋给子组件的data数据`childData`。这样，子组件就能够响应props数据的变化了。