Vue 3.3 “Rurouni Kenshin(译：浪客剑心)” 于一个小时前正式发布！这个版本的重点在于提高开发者体验，特别是使用 TypeScript 的 SFC <script setup>。与 Vue 语言工具 1.6 版本（之前称为 Volar）一起，我们解决了许多长期存在的在使用 TypeScript 时的痛点。
那么这个版本都有哪些亮点呢？下面我来给大家简单介绍一下。对于完整的更改列表，请参阅 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% 全面。某些需要实际类型分析的复杂类型（例如条件类型）不受支持。您可以使用条件类型作为单个 prop 的类型，但不能用于整个 props 对象。
泛型组件
使用 <script setup> 的组件现在可以通过泛型属性接受泛型类型参数：
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>
generic 的值与 TypeScript 中 <...> 之间的参数列表完全相同。例如，您可以使用多个参数、扩展约束、默认类型和引用已导入的类型：
<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 的类型参数仅支持调用签名语法：
// BEFORE
const emit = defineEmits<{
(e: 'foo', id: number): void
(e: 'bar', name: string, ...rest: any[]): void
}>()
类型匹配 emit 的返回类型，但有点冗长和笨拙。3.3 引入了一种更符合人体工程学的声明带有类型的 Emit 事件的方法：
ts复制代码
// AFTER
const emit = defineEmits<{
foo: [id: number]
bar: [name: string, ...rest: any[]]
}>()
在类型文字中，键是事件名称，值是指定其他参数的数组类型。尽管不是必需的，但可以使用标记的元组元素来明确性地表示，就像上面的示例一样。
调用签名语法仍然受支持。
带有 defineSlots 的类型化插槽
新的 defineSlots 宏可用于声明预期的插槽及其相应的插槽道具：
<script setup lang="ts">
defineSlots<{
default?: (
props: { msg: string }) => any item?: (props: { id: number }) => any }>()
复制代码
defineSlots() 仅接受类型参数，不接受运行时参数。类型参数应该是一个类型文字，其中属性键是插槽名称，值是插槽函数。函数的第一个参数是插槽期望接收的道具，它的类型将用于模板中的插槽道具。defineSlots 的返回值与 useSlots 返回的相同插槽对象。
一些当前的限制：
- 尚未实现所需的插槽检查。
- 插槽函数返回类型目前被忽略，并且可以是任何类型，但我们可能会在未来利用它进行插槽内容检查。
defineComponent使用的slots选项也有对应的选项。两个 API 都没有运行时影响，纯粹作为 IDE 和 vue-tsc 的类型提示。
实验特性：反应道具解构
以前属于已删除的 Reactivity Transform 的一部分，反应道具解构已拆分为单独的特性。该特性允许解构道具保留反应性，并提供了一种更符合人体工程学的声明道具默认值的方法：vue
<script setup>
import { watchEffect } from 'vue'
const { msg = 'hello' } = defineProps(['msg'])
watchEffect(() => {
// 访问 watcher 和 computed getter 中的 `msg`
// 跟访问 `props.msg` 一样，会被追踪为一个依赖项
console.log(`msg is: ${msg}`)
})
</script>
<template>{{ msg }}</template>
此功能是实验性的，需要显式选择加入。
defineModel
以前，要使组件支持与 v-model 的双向绑定，它需要（1）声明 prop，并在意图更新 prop 时（2）发出相应的 update:propName 事件：
<!-- 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：
<!-- AFTER -->
<script setup>
const modelValue = defineModel()
console.log(modelValue.value)
</script>
<template>
<input v-model="modelValue" />
</template>
此功能是实验性的，需要显式选择加入。
其他值得注意的特性
defineOptions：新的defineOptions宏允许直接在<script setup>中声明组件选项，而无需单独的<script>块。toRef和toValue的更好的 getter 支持：toRef已经增强了支持将值/ getter/ 现有 ref 规范化为 ref，而toValue提供相反的功能。
总结
总之，Vue 3.3 “Rurouni Kenshin” 带来了许多改进和扩展。更新中最重要的是开发者体验的提高，特别是在使用 TypeScript 方面。所以如果你是一个 Vue 和 TypeScript 的爱好者，赶快去试试这个新版本吧！同时也希望 Vue 能够继续为我们带来更多好用、易用的功能和工具。
本篇文章由ai辅助创作
