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辅助创作