vue3监听props数据变化

在 Vue 3 中，监听 props 数据的变化可以通过 watch 或者 computed 属性来实现。如果你希望获取包含代码的示例，请参考以下内容：

示例代码

使用 watch 监听 props 变化

<template>
  <div>{{ message }}</div>
</template>

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

export default {
  props: {
    propMessage: String
  },
  setup(props) {
    const message = ref(props.propMessage);

    // 监听 propMessage 的变化
    watch(() => props.propMessage, (newVal, oldVal) => {
      console.log('propMessage changed from', oldVal, 'to', newVal);
      message.value = newVal;
    });

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

解释说明

1. props 定义：我们定义了一个名为 propMessage 的 props。
2. setup 函数：这是 Vue 3 组合式 API 的入口函数。
3. ref 创建响应式变量：使用 ref 创建一个响应式的 message 变量，并将其初始值设置为 propMessage 的值。
4. watch 监听变化：使用 watch 来监听 propMessage 的变化。每当 propMessage 发生变化时，都会触发回调函数，更新 message 的值并输出变化信息。

如果你需要更详细的解释或其他方式的实现，请告知。