vue3 watch props

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

<script>
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>

解释说明：

1. 定义 Props：在组件中通过 props 选项定义了一个名为 message 的属性，类型为字符串，并且是必需的。
2. 使用 watch 监听 Prop 变化：
   • 在 setup 函数中使用 watch 来监听 props.message 的变化。
   • watch 接收两个参数：第一个是一个 getter 函数（返回要监听的数据），第二个是一个回调函数，在数据发生变化时会调用该回调函数。
   • 回调函数接收两个参数：newVal 和 oldVal，分别表示新值和旧值。
3. 执行逻辑：在回调函数中可以执行一些逻辑，例如更新组件的状态或触发其他操作。