发布日期

宣布 Vue 3.3

作者

今天，我们很高兴地宣布发布 Vue 3.3 "浪客剑心"！

此版本专注于改进开发人员体验，特别是 SFC <script setup> 与 TypeScript 的使用。结合 Vue 语言工具（以前称为 Volar）的 1.6 版本，我们解决了使用 Vue 与 TypeScript 时许多长期存在的痛点。

本文概述了 3.3 中的突出功能。有关完整更改列表，请参阅 GitHub 上的完整变更日志。

依赖项更新

升级到 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）

<script setup> + TypeScript DX 改进 ​

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

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

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

vue
<script setup lang="ts">
import type { Props } from './foo'

// imported + intersection type
defineProps<Props & { extraProp?: string }>()
</script>

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

泛型组件 ​

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

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

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

vue
<script setup lang="ts" generic="T extends string | number, U extends Item">
import type { Item } from './types'
defineProps<{
  id: T
  list: U[]
}>()
</script>

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

更符合人体工程学的 defineEmits ​

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

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

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

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

在类型字面量中，键是事件名称，值是指定附加参数的数组类型。虽然不是必需的，但您可以使用 带标签的元组元素 来提高明确性，如上面的示例所示。

仍然支持调用签名语法。

使用 defineSlots 的类型化插槽 ​

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

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

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

一些当前限制

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

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

实验性功能 ​

响应式道具解构 ​

响应式道具解构以前是现在已放弃的 Reactivity Transform 的一部分，现在已拆分为一个单独的功能。

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

vue
<script setup>
import { watchEffect } from 'vue'

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

watchEffect(() => {
  // accessing `msg` in watchers and computed getters
  // tracks it as a dependency, just like accessing `props.msg`
  console.log(`msg is: ${msg}`)
})
</script>

<template>{{ msg }}</template>

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

defineModel ​

以前，为了使组件支持使用 v-model 进行双向绑定，它需要 (1) 声明一个道具，以及 (2) 当它打算更新道具时发出相应的 update:propName 事件

vue
<!-- BEFORE -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
console.log(props.modelValue)

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

<template>
  <input :value="modelValue" @input="onInput" />
</template>

3.3 使用新的 defineModel 宏简化了使用。宏会自动注册一个道具，并返回一个可以直接修改的 ref

vue
<!-- AFTER -->
<script setup>
const modelValue = defineModel()
console.log(modelValue.value)
</script>

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

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

其他值得注意的功能 ​

defineOptions ​

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

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

使用 toRef 和 toValue 更好地支持 Getter ​

toRef 已得到增强，可以支持将普通值/Getter/现有 ref 规范化为 ref

js
// 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)

使用 Getter 调用 toRef 类似于 computed，但在 Getter 仅执行属性访问且没有昂贵的计算时，效率更高。

新的 toValue 实用程序方法提供了相反的操作，将值/Getter/ref 规范化为值

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

toValue 可用于可组合组件中以代替 unref，以便您的可组合组件可以接受 Getter 作为响应式数据源

js
// 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 函数的特殊处理。

JSX 导入源支持 ​

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

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

为了向后兼容，3.3 仍然在全局范围内注册 JSX 命名空间。我们计划在 3.4 中删除默认的全局注册。如果您使用的是 TSX 与 Vue，则应在升级到 3.3 后将显式 jsxImportSource 添加到您的 tsconfig.json 中，以避免在 3.4 中出现故障。

维护基础设施改进 ​

此版本建立在许多维护基础设施改进之上，使我们能够以更高的信心更快地前进。

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

正如计划的那样，我们计划在 2023 年开始发布更小、更频繁的功能版本。敬请关注！