最新!vue3.3-浪客剑心 发布!

444 阅读2分钟

Vue 3.3 “Rurouni Kenshin(译:浪客剑心)” 于一个小时前正式发布!这个版本的重点在于提高开发者体验,特别是使用 TypeScript 的 SFC <script setup>。与 Vue 语言工具 1.6 版本(之前称为 Volar)一起,我们解决了许多长期存在的在使用 TypeScript 时的痛点。 vue3.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 改进

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

以前,在 definePropsdefineEmits 的类型参数位置使用的类型仅限于本地类型,并且仅支持类型字面量和接口。这是因为 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辅助创作

原文地址:blog.vuejs.org/posts/vue-3…