Vue 3.3 发布

本文为翻译

原文地址：宣布推出 Vue 3.3 |The Vue Point (vuejs.org)

今天我们很高兴地宣布 Vue 3.3 “Rurouni Kenshin” 的发布！

此版本侧重于开发人员体验改进 - 特别是 TypeScript 的 SFC

请注意，复杂类型支持是基于 AST 的，因此不是 100% 全面的。不支持一些需要实际类型分析的复杂类型，例如条件类型。您可以将条件类型用于单个 props 的类型，但不能对整个 props 对象使用。

• 详细信息： PR#8083

泛型组件

使用

generic 的值与 TypeScript 中的<...>参数列表完全相同。例如，可以使用多个参数、extends 约束、默认类型和引用导入的类型：

此功能以前需要明确的选择加入，但现在在最新版本的 volar/vue-tsc 中默认启用。

• 讨论：RFC#436
• 相关： generic defineComponent() - PR#7963

更符合人体工程学defineEmits

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

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

该类型与 emit 的返回类型匹配，但编写起来有点冗长和笨拙。3.3 引入了一种更符合人体工程学的用类型声明发出的方式：

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

在类型文本中，键是事件名称，值是指定其他参数的数组类型。尽管不是必需的，但您可以使用标记的元组元素来实现显式性，如上例所示。

仍支持以前的函数调用签名语法。

类型化插槽defineSlots

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

defineSlots()只接受类型参数，不接受运行时参数。类型参数应为类型文本，其中属性键是槽名称，值是槽函数。函数的第一个参数是插槽期望接收的道具，其类型将用于模板中的槽道具。defineSlots 的返回值与从 useSlots 返回的插槽对象相同。

当前的一些限制：

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

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

• 详细信息： PR#7982

实验性功能

Reactive 解构（Reactive Props Destructure）

以前是现在放弃的反应性变换的一部分，反应式道具解构已被拆分为一个单独的功能。

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

此功能是实验性的，需要明确选择加入。

• 详细信息： RFC#502

defineModel

以前，对于支持 v-model 双向绑定的组件，它需要 （1） 声明一个 prop 和 （2） 在打算更新 prop 时发出相应的update:propName事件：

3.3 简化了新宏的使用。defineModel 宏会自动注册一个 prop，并返回一个可以直接变异的 ref：

此功能是实验性的，需要明确选择加入。

• 详细信息： RFC#503

其他值得注意的功能

defineOptions

新的宏defineOptions允许直接在

Better Getter Support with toRef and toValue

toRef已得到增强，支持将values / getter /existing refs 规范化为引用：

// equivalent to ref(1) toRef(1) // creates a readonly ref that calls the getter on .value access toRef(() => props.foo) // returns existing refs as-is toRef(existingRef)

toRef使用 getter 调用类似于computed ，但当 getter 只是执行属性访问而不进行昂贵的计算时，可能会更有效。

新的实用程序toValue方法提供了相反的结果，将值values/getter/refs 规范化为values ：

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

toValue可以在可组合项中使用，unref 以便您的可组合项可以接受 getter 作为反应式数据源：

// before: allocating unnecessary intermediate refs useFeature(computed(() => props.foo)) useFeature(toRef(props, 'foo')) // after: more efficient and succinct useFeature(() => props.foo)

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

• 详细信息： PR#7997

JSX 导入源支持

目前，Vue 的类型会自动注册全局 JSX 类型。这可能会导致与其他需要 JSX 类型推理的库（特别是 React）一起使用的冲突。

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

为了向后兼容，3.3 仍然全局注册 JSX 命名空间 。我们计划在 3.4 中删除默认的全局注册。 如果你在 Vue 中使用 TSX，你应该在升级到 3.3 后在tsconfig.json显式添加 jsxImportSource，以避免在 3.4 中出现损坏。

维护基础设施改进

此版本基于许多维护基础架构改进，使我们能够更快地、更自信地移动：

• 通过将类型检查与汇总版本分离并从 rollup-plugin-typescript2 更换为 rollup-plugin-esbuild，将生成速度提高 10 倍。
• 通过从 Jest 更换为 Vitest 来加快测试速度。
• 通过从 @microsoft/api-extractor 更换为 rollup-plugin-dts 来更快地生成类型。
• 通过生态系统-ci进行全面的回归测试 - 在发布之前捕获主要生态系统依赖项的回归！

按照计划，我们的目标是在 2023 年开始发布更小、更频繁的功能版本。敬请期待！