vue3 watch监听props

<template>
  <div>
    <!-- 组件模板 -->
  </div>
</template>

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

export default {
  props: {
    // 定义一个名为 `message` 的 prop
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 使用 watch 监听 props 中的 message 变化
    watch(() => props.message, (newVal, oldVal) => {
      console.log('新的 message 值:', newVal);
      console.log('旧的 message 值:', oldVal);
      // 在这里可以执行一些逻辑，例如更新组件的状态或触发其他操作
    });

    return {};
  }
};
</script>

<style scoped>
/* 组件样式 */
</style>

解释说明：

1. props 定义：在 props 中定义了一个名为 message 的属性，类型为字符串，并且是必需的。
2. watch 监听：使用 watch 函数监听 props.message 的变化。当 message 发生变化时，回调函数会被触发，传入新值 (newVal) 和旧值 (oldVal)。
3. setup 函数：setup 是 Vue 3 的组合式 API 的入口，在这里我们可以访问和操作组件的状态、生命周期钩子等。
4. 回调函数：在 watch 的回调函数中，可以根据需要执行一些逻辑，例如更新组件的状态或触发其他操作。

这个示例展示了如何在 Vue 3 中使用 watch 来监听从父组件传递下来的 props 的变化。