Vue3.2setup 到 顶层 await

1.setup直接挂再script

<script setup lang="ts">

</script>

2.defineProps

// props 改为defineProps
// required 改为 ? (加上不必传)
defineProps<{
    msg?: string,
    lrq: string
}>()

3.withDefaults

// withDefaults是给默认值
withDefaults(defineProps<{
    msg: string,
    lrq?: string
}>(), {
    msg: '提示'
})

4.检测父子组件数组的类型

withDefaults(defineProps<{
    msg?: string,
    lrq: string,
    list?: {id: Number,content: String}[]
}>(), {
    msg: '提示'
})

5. 插槽

// useSlots
// 获取插槽的信息 
> const slots = useSlots()

//useAttrs  
// 注意不能和 defineProps 一起使用
//父组件
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" lrq="lrq"> 
    <template #lrq>
        这是一个具名插槽
    </template>
</HelloWorld>  
// 子组件
// 获取插槽传过来的所有属性
const attrs = useAttrs();
onMounted(()=>{
    console.log(attrs.msg)
})

5. 与普通的 < script > 一起使用

< script setup>可以和普通的< script>一起使用。普通的< script> 在有些需要的情况下或许会被使用到：

1. 无法在script setup 声明的选项，例如inheritAttrs或者通过插件启用的自定义的选项
2. 显示定义组件的名称
3. 运行副作用或者创建只需要执行一次的对象

5. 顶层 await

如果使用await setup前面会自动加一个async

const data = await fetch("")

6. 限制使用scr导入