vue3 监听props

<template>
  <div>
    <!-- 使用父组件传递的 props -->
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 定义一个响应式变量来存储 props 的值
    const localMessage = ref(props.message);

    // 监听 props 的变化
    watch(() => props.message, (newVal, oldVal) => {
      console.log(`message changed from ${oldVal} to ${newVal}`);
      // 更新本地变量
      localMessage.value = newVal;
    });

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

解释说明：

1. Props 定义：在 props 选项中定义了 message，它是一个字符串类型的属性，并且是必需的。
2. 监听 Props 变化：使用 watch 函数监听 props.message 的变化。当 message 发生变化时，会触发回调函数，输出变化前后的值，并更新本地的 localMessage 变量。
3. 响应式变量：通过 ref 创建了一个响应式变量 localMessage，用于存储和跟踪 props.message 的当前值。
4. 模板使用：在模板中直接使用了 message，但实际应用中你可能更希望使用 localMessage 来确保数据的一致性。

这样可以确保即使父组件传递的 props 发生变化，子组件也能及时做出响应并更新状态。