Vue 3.3 官宣升级！Vue 3.4 预热。

大家好，这里是大家的林语冰。

今天尤大（Evan You，尤雨溪）又双叒叕发朋友圈了，Vue 3.4 beta（公测版）将于本周正式发布，且期望在今年年底尘埃落定。

所以，本期《前端翻译计划》共享的是尤大亲笔的官方博客，Vue 团队官宣 Vue 3.3 正式发布，一起来重温今年五月 Vue 3.3 的升级大纲，为 Vue 3.4 预热前戏。

免责声明

本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 Announcing Vue 3.3。

今天，我们十分鸡冻，普大喜奔 ------ Vue 3.3（代号"浪客剑心"）正式发布！

此版本聚焦于优化 UX（开发体验） ------ 尤其是 SFC（单文件组件）<script setup> 和 TS（TypeScript）梦幻联动。联手 Vue 语言工具（曾用名 Volar） 的 1.6 版本，我们搞定了一大坨用 TS 写 Vue 的痼疾。

本文概述了 Vue 3.3 的亮点功能。关于更新的完整清单，请传送 GitHub 完整更新日志。

---

依赖更新

当升级到 Vue 3.3 时，建议同时更新以下依赖：

• volar/vue-tsc@^1.6.4
• vite@^4.3.5
• @vitejs/plugin-vue@^4.2.0
• vue-loader@^17.1.0（如果使用了 webpack/vue-cli）

Vue 3.3 版本速览：

• 优化 <script setup> + TS DX（开发体验）
  • 支持宏中的导入类型和复杂类型
  • 泛型组件
  • 更符合人体工程学的 definedEmits
  • 携带 definedSlots 的类型插槽
• 实验性功能
  • 响应式 props 解构
  • defineModel
• 其他重要功能
  • defineOptions
  • 更好地支持 getter 与 toRef 和 toValue 一起使用
  • 支持 JSX 导入源
• 优化维护基建

优化 <script setup> + TS DX

支持宏中的导入类型和复杂类型

以前，defineProps 和 defineEmits 类型参数位置中使用的类型仅限于局部类型，并且能且仅能支持类型字面量和接口。这是因为，Vue 需要分析 props 接口上的属性，生成相应的运行时选项。

此限制现已被 Vue 3.3 解决。编译器现在可以解析导入类型，并支持一组有限的复杂类型：

请注意，复杂类型支持基于 AST，因此 100% 支持。某些需要实际类型分析的复杂类型，比如支持条件类型，并无法支持。您可以对单个 props 的类型使用条件类型，但不能对整个 props 对象使用。

泛型组件

使用了 <script setup> 的组件现在可以通过 generic 属性接受泛型类型参数：

generic 的值与 TS 中 <...> 之间的参数列表完全相同。举个栗子，您可以使用多个参数、extends 约束、默认类型和引用导入类型：

此功能以前需要显式选用，但现在最新版本的 volar/vue-tsc 默认启用。

更符合人体工程学的 definedEmits

以前，defineEmits 的类型参数能且仅能支持调用签名语法：

// 以前
const emit = defineEmits<{
  (e: 'foo', id: number): void
  (e: 'bar', name: string, ...rest: any[]): void
}>()

该类型匹配 emit 的返回类型，但有点冗长且难以编写。Vue 3.3 引入了一种更符合人体工程学的 emits 类型声明方式：

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

在类型字面量中，键是事件名称，值是指定额外参数的数组类型。尽管这不是必需的，但您可以使用标签元组元素来明确，如上所示。

调用签名语法仍然支持。

携带 definedSlots 的类型插槽

新的 defineSlots 宏可用于声明预期插槽及其各自的预期插槽 props：

defineSlots() 能且仅能接受类型参数，而不是运行时参数。类型参数应该是类型字面量，其中属性键是插槽名，值是插槽函数。函数的首参是插槽期望接收的 props，其类型将用于模板中的插槽 props。defineSlots 的返回值与 useSlots 返回的插槽对象相同。

目前的某些限制：

• volar/vue-tsc 中尚未实现所需的插槽检查。
• 插槽函数返回类型目前被忽略，且可以是 any，但我们将来可能会利用它来检查插槽内容。

还有一个相应的 slots 选项供 defineComponent 使用。这两个 API 都没有运行时影响，纯粹用作 IDE 和 vue-tsc 的类型提示。

实验性功能

响应式 props 解构

响应式 props 解构以前是响应性转换（现已废弃）的一部分，现已被抽离为一个单独的功能。

该功能允许解构的 props 保留反应性，并提供更符合人体工程学的方式来声明 props 默认值：

此功能是实验性的，需要显式选用。

defineModel

以前，对于支持与 v-model 双向绑定的组件，它需要 :

1. 声明一个 prop
2. 在打算更新该 prop 时触发相应的 update:propName 事件：

Vue 3.3 通过新的 defineModel 宏简化了用法。该宏自动注册一个 prop，并返回一个可以直接变更的 ref：

此功能是实验性的，需要显式选用。

其他重要功能

defineOptions

新的 defineOptions 宏允许直接在 <script setup> 中声明组件选项，而不需要单独的 <script> 块：

更好地支持 getter 与 toRef 和 toValue 一起使用

toRef 已增强，支持将值/getter/现有 ref 标准化为 ref：

// 等价于 ref(1)
toRef(1)
// 创建一个只读 ref，它通过访问 .value 调用 getter
toRef(() => props.foo)
// 原样返回现有 ref
toRef(existingRef)

使用 getter 调用 toRef 与 computed 类似，但当 getter 仅执行属性访问而不进行昂贵的计算时，效率会更高。

新的 toValue 工具方法提供了相反的功能，将值/getter/ref 标准化为值：

toValue(1) //       --> 1
toValue(ref(1)) //  --> 1
toValue(() => 1) // --> 1

toValue 可以在组合式函数中代替 unref，以便您的组合式函数可以接受 getter 作为响应式数据源：

// 之前：分配不必要的中间 ref
useFeature(computed(() => props.foo))
useFeature(toRef(props, 'foo'))

// 之后：更高效精简
useFeature(() => props.foo)

toRef 和 toValue 之间的关系类似于 ref 和 unref 之间的关系，主要区别在于 getter 函数的特殊处理。

支持 JSX 导入源

目前，Vue 的类型自动注册全局 JSX 类型。这可能与其他需要 JSX 类型推断的库"梦幻联动"时产生冲突，尤其是 React。

从 Vue 3.3 开始，Vue 支持通过 TS 的 jsxImportSource 选项指定 JSX 命名空间。这允许用户根据其用例选择全局或每个文件选用。

为了向后兼容，Vue 3.3 仍然全局注册 JSX 命名空间。我们计划在 Vue 3.4 中移除默认的全局注册。如果您让 TSX 与 Vue "梦幻联动"，那么应在升级到 Vue 3.3 后将显式 jsxImportSource 添加到 tsconfig.json 中，避免在 Vue 3.4 中爆炸。

优化维护基建

此版本建立在一大坨维护基建优化的基础上，使我们能够昂首先前：

• 通过将类型检查与 rollup 构建分开并从 rollup-plugin-typescript2 迁移到 rollup-plugin-esbuild，构建速度提高了 10 倍。
• 从 Jest 迁移到 Vitest，测试速度更快。
• 从 @microsoft/api-extractor 迁移到 rollup-plugin-dts，更快地生成类型。
• 通过 ecosystem-ci 进行综合回归测试 ------ 在发布前捕获主要生态系统依赖的回归！

依计行事，我们的目标是在今年开始发布更小、更频繁的功能版本。敬请期待！

您现在收看的是《前端翻译计划》，学废了的小伙伴可以订阅此专栏合集，我们每天佛系投稿，欢迎持续关注前端生态。谢谢大家的点赞，掰掰~