defineProps的原理

defineProps是Vue 3中用于定义组件props的函数。它的原理是通过将props对象转换为响应式对象，使得组件可以接收外部传递的props数据，并在组件内部进行使用。

下面是一个使用defineProps的示例：

import { defineProps } from 'vue';

export default {
 props: {
    message: String,
    count: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    // 使用defineProps定义props
    const { message, count } = defineProps({
      message: String,
      count: {
        type: Number,
        default: 0
      }
    });

    // 在组件内部使用props
    console.log(message); // 输出外部传递的message值
    console.log(count); // 输出外部传递的count值

    return {
      message,
      count
    };
  }
};

在上面的示例中，我们使用defineProps函数将props对象转换为响应式对象，并在组件内部使用解构赋值的方式获取props的值。这样就可以在组件内部直接使用props的值了。