中文开发文档手册

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

此版本侧重于开发人员体验改进 - 特别是 TypeScript 的 SFC 使用。结合 Vue Language Tools（以前称为 Volar）的 1.6 版本，我们解决了将 Vue 与 TypeScript 一起使用时的许多长期存在的痛点。<script setup>

这篇文章概述了 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）
<脚本设置> + TypeScript DX 改进
实验性功能
- 反应式道具解构
- 定义模型
其他值得注意的功能
维护基础设施改进

`<script setup>`+ 打字稿 DX 改进

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

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

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

vue

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

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

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

详细信息： PR#8083

通用组件

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

vue

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

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

讨论：RFC#436
相关：通用定义组件（） - PR#7963

更符合人体工程学`defineEmits`

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

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

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

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

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

详细信息： PR#7982

实验性功能

反应式道具解构

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

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

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>

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

详细信息： RFC#502

`defineModel`

以前，对于支持双向绑定的组件，它需要（1）声明一个 prop 和（2）在打算更新 prop 时发出相应的事件：v-model``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 简化了新宏的使用。宏会自动注册一个 prop，并返回一个可以直接变异的 ref：defineModel

vue

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

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

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

详细信息： RFC#503

其他值得注意的功能

`defineOptions`

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

vue

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

更好的吸气剂支持和toRef``toValue

toRef已得到增强，支持将值/获取者/现有引用规范化为引用：

// 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 调用类似于，但当 getter 只是执行属性访问而不进行昂贵的计算时，可能会更有效。toRef``computed

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

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

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

// before: allocating unnecessary intermediate refs
useFeature(computed(() => props.foo))
useFeature(toRef(props, 'foo'))

// after: more efficient and succinct
useFeature(() => props.foo)

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

详细信息： PR#7997

JSX 导入源支持

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

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

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

维护基础设施改进

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

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

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

<script setup>+ 打字稿 DX 改进