vue3 export default 和 setup 接收defineProps

Vue 3引入了新的架构特性，其中`setup()`函数是用来替代传统组件中的`export default {}`结构的。`setup`是一个轻量级函数式组件选项，它允许你在组件内部声明所有的局部状态、计算属性以及生命周期钩子，而不是在模板中直接书写。

当你使用`export default`配合`setup`时，你可以这样做：

// 在文件中导入@vue/composition-api
import { defineComponent, defineProps } from 'vue';

// 定义props
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  age: {
    type: Number,
  },
});

// 在setup函数中使用props
async function setup(props) {
  const computedAge = computed(() => props.age + 1);
  
  return {
    // 返回一个对象，包含模板需要的数据或方法
    name: props.name,
    computedAge,
  };
}

// 导出组件
export default defineComponent({
  setup,
  props,
});

在这个例子中，`defineProps`用于创建并返回一个props对象，它包含了组件接收的属性配置。`setup`函数则负责处理组件的行为逻辑，包括依赖注入和计算属性的定义。