本篇文章翻译自 Vue Blog

今天 vue3.3 以 浪客剑心 为代号发布了，本次更新主要专注于 DX（开发体验）进行改善，特别是针对在 script setup 中使用 typescript 的一系列痛点进行改进。这篇文章旨在描述 3.3 中的重要特性，有关更完整的更改列表，请查阅 changelog。

要体验这些新特性，前提是你的 volar 更新到了 1.6.x 及以上。并且升级了如下的依赖：

volar / vue-tsc@^1.6.4

vite@^4.3.5

@vitejs/plugin-vue@^4.2.0

vue-loader@^17.1.0 (if using webpack or vue-cli)

<script setup> + TypeScript 的DX 改善

宏定义的类型支持复杂类型及导入

之前 defineProps 和 defineEmits 的类型参数位置使用的类型仅限于本地类型（同一文件），并且只支持类型字面量和接口。这是因为 Vue 需要能够分析 props 接口上的属性，以便生成相应的运行时选项。此限制现已在 3.3 中解决。编译器现在可以解析导入的类型，并支持一组有限的复杂类型：

xml复制代码<script setup lang="ts">
import type { Props } from './foo'

// 导入 + 交叉类型
defineProps<Props & { extraProp?: string }>()
</script>

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

细节：github.com/vuejs/core/…

泛型组件

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

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

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

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

此功能以前需要明确进行配置 eg: vite.config.*，但现在在最新版本的 volar / vue-tsc 中默认启用。

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

更友好的 defineEmits

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

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

该类型与 emit 的返回类型相匹配，但写起来有点冗长和笨拙。 3.3 引入了一种更友好的方式来声明 emit 的类型：

typescript复制代码// AFTER
const emit = defineEmits<{
  foo: [id: number],
  bar: [name: string, ...rest: any[]],
  baz: [name: string, ...rest: [number, boolean]]
}>()

在类型结构中，键是事件名称，值是指定参数的类型数组。虽然不是必需的，但您可以使用带标签的元组元素来明确显示，如上例所示。当然 defineEmits 仍然支持调用签名语法。

使用 defineSlots 定义插槽类型

新的 defineSlots 宏可用于声明插槽及插槽的 props：

typescript复制代码<script setup lang="ts">
defineSlots<{
  default?: (props: { msg: string }) => any;
  item?: (props: { id: number }) => any
}>()
</script>

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

当前的 defineSlots 一些限制：

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

defineComponent 用法也有对应的 slots 选项。这两个 API 都没有运行时影响，并且纯粹用作 IDE 和 vue-tsc 的类型提示。

细节请查看: PR#7982

实验性特性

props 支持解构

以前是现已删除的 Reactivity Transform 的一部分，reactive props destructure 已拆分为一个单独的功能。

该功能允许解构的 props 保留响应式，并提供更有好的方式来声明 props 默认值：

xml复制代码<script setup>
import { watchEffect } from 'vue'
?
const { msg = 'hello' } = defineProps(['msg'])
?
watchEffect(() => {
  // msg 将会被试做为依赖进行追踪, 就像访问 props.msg 一样，当 msg 更新副作用函数会重新执行
  console.log(`msg is: ${msg}`)
})
</script>
?
<template>{{ msg }}</template>

此功能是实验性的，需要进行配置。

• 详情请查看: RFC#502

defineModel

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

xml复制代码<!-- 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 宏简化了使用。宏会自动注册一个 prop，并返回一个可以直接改变的 ref：

xml复制代码<!-- AFTER -->
<script setup>
const modelValue = defineModel()
console.log(modelValue.value)
</script>
?
<template>
  <input v-model="modelValue" />
</template>

此功能是实验性的，需要进行配置。

• 详情请查看: RFC#503

其他新特性

defineOptions

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

xml复制代码<script setup>
defineOptions({ inheritAttrs: false })
</script>

toRef 和 toValue

toRef 已得到增强以支持将 普通值、getters函数、refs 转化为 refs：

scss复制代码// 等同于 ref(1)
toRef(1)
// 创建一个只读的 ref，当访问 .value 的时候传入的 getter 函数将会被调用
toRef(() => props.foo)
// 返回这个已存在的 ref
toRef(existingRef)

性能优化来了：使用 getter 调用 toRef 类似于 computed，但当 getter 只是执行属性访问而不需要昂贵的计算时，它会更高效。

新的 toValue 实用方法提供了相反的方法，将 values / getters / refs 规范化为值：

scss复制代码toValue(1) //       --> 1
toValue(ref(1)) //  --> 1
toValue(() => 1) // --> 1

toValue 可以在组合函数（hooks）中代替 unref 使用，这样您的组合函数就可以接受 getter 作为响应式数据源：

scss复制代码// before: 分配不必要的中间引用
useFeature(computed(() => props.foo))
useFeature(toRef(props, 'foo'))
?
// after: 更高效简洁
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 后将显式的 jsxImportSource 添加到你的 tsconfig.json 以避免在 3.4 中损坏。

vue 生态的改进

此版本建立在许多基础生态改进的基础上，使我们能够更有信心地更快地行动：

• 通过将类型检查与构建分开，并从 rollup-plugin-typescript2 移动到 rollup-plugin-esbuild，构建速度提高了 10 倍。
• 通过从 Jest 迁移到 Vitest 来加快测试速度。
• 通过从 @microsoft/api-extractor 移动到 rollup-plugin-dts 来更快地生成类型。

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

作者：artsmp

链接：https://juejin.cn/post/7231940493256048700