Vue 3.3已发布,本版本持续改进开发者体验,新增语法和宏定义,以及TypeScript支持。
本版本包含泛型组件
、定义插槽
和emit类型
、定义组件选项
,以及实验性功能如响应式props解构
和定义模型语法糖
。本版本还废弃了Reactivity Transform
。
- 新的宏定义之一
defineOptions
用于定义Options API选项,可用于定义除props
、emits
、expose
和slot
之外的任何选项。 - 另一个新功能是
hoistStatic
,它通过将常量声明提升到顶层来优化SFC编译器
。 defineModel
是一个新的语法糖宏,用于定义双向绑定props。
泛型组件
泛型组件现在支持从外部导入TypeScript类型定义props和emits,解决了之前只能使用本地类型的限制。
例如:
import type { Props } from './foo'
defineProps<Props & { extraProp?: string }>()
你也可以从第三方包或全局.d.ts文件导入类型。但是,条件类型仍不支持。
defineEmits
之前,defineEmits的类型参数只支持调用签名语法:
defineEmits<{
(event: 'click', ...args: any[]): void
}>()
3.3引入了更友好的方式来声明带有类型的emit:
defineEmits<{
'click': (x: number, y: string) => void
}>()
在类型字面量中,键是事件名称,值是指定额外参数的数组类型。尽管不是必需的,但你可以使用infer
显式,如上例所示。
调用签名语法仍然受支持。
定义插槽类型
定义插槽类型是一个全新的功能,用于定义插槽的类型,对复杂组件很有用。
例如:
defineProps<{data: T[]}>()
defineSlots<{default(props: {item: T}): any}>()
使用:
<Paginator :data="[1, 2, 3]">
<template #default="{ item }">{{ item }}</template>
</Paginator>
定义组件选项
定义组件选项允许你直接在setup()中使用defineOptions()定义组件名,无需在script setup之外使用script。
例如:
defineOptions({
name: 'Foo'
})
响应式Props解构实验性功能
响应式Props解构是一个实验性功能,可以简化Props解构和设置默认值的语法。
例如:
const { msg = 'hello' } = defineProps(['msg'])
defineModel实验性功能
defineModel 相对于之前大量的update:modelValue
写法,极大的简化的开发人员的使用心智
<script setup>
const modelValue = defineModel()
</script>
<template>
<input v-model="modelValue" />
</template>
除此之外,本版本还包含提升静态常量
、加速构建
和测试
、生成类型定义文件
等编译器优化和基础设施更新。Vue现在支持指定JSX命名空间,以解决与React等库的JSX类型推断冲突。