Vue 3.3发布总结:重点功能全面解读

Vue3.3发布：改进开发者体验，引入泛型组件与新语法

原创已于 2023-05-15 21:36:56 修改 · 611 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-04-26 22:12:02 首次发布

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<{
  (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解构和设置默认值的语法。

例如:

const { msg = 'hello' } = defineProps(['msg'])

defineModel 相对于之前大量的update:modelValue写法,极大的简化的开发人员的使用心智

<script setup>
const modelValue = defineModel()
</script>

<template>
  <input v-model="modelValue" />
</template>

除此之外,本版本还包含提升静态常量、加速构建和测试、生成类型定义文件等编译器优化和基础设施更新。Vue现在支持指定JSX命名空间,以解决与React等库的JSX类型推断冲突。