vue3 查看 defineProps 的旧值和新值

在Vue 3中，可以使用`defineProps`来定义组件的props。`defineProps`是一个函数，它接收一个props对象作为参数，并返回一个响应式的props对象。

在Vue 3中，要查看props的旧值和新值，可以使用`watch`函数来监听props的变化。`watch`函数接收两个参数：要监听的props和一个回调函数。回调函数接收两个参数：新值和旧值。

下面是一个示例代码，展示了如何使用`defineProps`和`watch`来查看props的旧值和新值：

import { defineComponent, defineProps, watch } from 'vue';

const MyComponent = defineComponent({
  props: {
    message: String
  },
  setup(props) {
    // 定义props
    const propsData = defineProps({
      message: props.message
    });

    // 监听props变化
    watch(() => propsData.message, (newValue, oldValue) => {
      console.log('旧值：', oldValue);
      console.log('新值：', newValue);
    });

    return {
      propsData
    };
  }
});

在上面的代码中，我们首先使用`defineProps`定义了一个响应式的props对象`propsData`，并将传入的props值赋给它。然后使用`watch`函数监听`propsData.message`的变化，并在回调函数中打印出旧值和新值。