Vue3 defineProps定义数据 如何子组件更新数据，defineProps实时监听

在Vue 3中，可以使用`defineProps`来定义子组件的props。`defineProps`会创建一个响应式的props对象，使得父组件传递的props能够在子组件中进行监听和更新。

要实现在子组件中实时监听props的更新，可以使用`watch`或`watchEffect`函数。 `watch`可以监听特定的props或其他响应式数据的变化，并在变化时执行回调函数。而`watchEffect`则可以自动监听所有响应式依赖，并在任何响应式依赖发生变化时执行回调函数。

下面是一个示例代码，演示了如何使用`defineProps`和`watch`来实现子组件实时监听props的更新：

// 子组件
import { defineProps, watch } from 'vue';

export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    // 定义props
    defineProps(props);

    // 监听props变化
    watch(() => props.message, (newValue, oldValue) => {
      console.log('Props更新：', newValue, oldValue);
      // 执行相应的操作
    });

    // ...
  },
};

在上面的示例中，通过调用`defineProps(props)`来定义props，使得Vue能够追踪和监听props的变化。然后，使用`watch`函数来监听`props.message`的变化，并在变化时执行回调函数。

请注意，`watch`的第一个参数是一个getter函数，用于获取需要监听的props或其他响应式数据。而第二个参数是一个回调函数，当监听的数据发生变化时会被调用，回调函数的第一个参数是新值，第二个参数是旧值。

希望这个示例能帮助到你！如果有任何其他问题，请随时问我。