【Vue3.3】新特性

五月份正式发布的Vue3.3，有哪些新特性值得我们关注？

• 泛型组件

与TypeScript泛型概念类似，现在使用 <script setup> 的组件，可以通过 generic 属性接受泛型类型参数，或者通过extends约束传入泛型参数的类型

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

• defineEmits

在Vue3.3中，defineEmits的写法如下，其中key 是事件名称，value 是事件参数的数组类型

const emit = defineEmits<{
  foo: [id: number]
  bar: [name: string, ...rest: any[]]
}>()

• defineSlots

Vue3.3中，defineSlots()只接受一个类型参数，没有运行时参数。类型参数应该是一个类型字面量，其中key是slot名称，value是slot函数

<script setup lang="ts">
defineSlots<{
  default?: (props: { msg: string }) => any
  item?: (props: { id: number }) => any
}>()
</script>

• defineOptions

在Vue3.3中，defineOptions允许声明options选项，可以声明组件的名称云云

<script setup>
defineOptions({ inheritAttrs: false })
</script>

以上是Vue3.3比较值得关注的新特性，Suspense、响应式的props解构、defineModel 仍是实验性特性，如果想要扩展知识点可以自行去了解^-^