Vue 3.3 发布

简介: Vue 3.3 发布

本文为翻译

原文地址:宣布推出 Vue 3.3 |The Vue Point (vuejs.org)

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

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

这篇文章概述了 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)

<script setup> + typescript DX 改进

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

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

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

<script setup lang="ts">
import type { Props } from './foo'
// imported + intersection type
defineProps<Props & { extraProp?: string }>()
</script>

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

泛型组件

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

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

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

<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 引入了一种更符合人体工程学的用类型声明发出的方式:

// 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
}>()
</script>

defineSlots()只接受类型参数,不接受运行时参数。类型参数应为类型文本,其中属性键是槽名称,值是槽函数。函数的第一个参数是插槽期望接收的道具,其类型将用于模板中的槽道具。defineSlots 的返回值与从 useSlots 返回的插槽对象相同。

当前的一些限制:

  • 所需的插槽检查尚未在 volar / vue-tsc 中实现。
  • slot 函数返回类型目前被忽略,但我们将来可能会利用它来检查槽内容。

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

实验性功能

Reactive 解构(Reactive Props Destructure)

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

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

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

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

defineModel

以前,对于支持 v-model 双向绑定的组件,它需要 (1) 声明一个 prop 和 (2) 在打算更新 prop 时发出相应的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 setup>
defineOptions({ inheritAttrs: false })
</script>

Better Getter Support with toRef and toValue

toRef已得到增强,支持将values / getter /existing refs 规范化为引用:

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

toRef使用 getter 调用类似于computed ,但当 getter 只是执行属性访问而不进行昂贵的计算时,可能会更有效。

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

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

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

// before: allocating unnecessary intermediate refs
useFeature(computed(() => props.foo))
useFeature(toRef(props, 'foo'))
// after: more efficient and succinct
useFeature(() => props.foo)

toReftoValue 之间的关系类似于 refunref 之间的关系,主要区别在于 getter 函数的特殊处理。

JSX 导入源支持

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

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

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

维护基础设施改进

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

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

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


相关文章
|
10天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
113 64
|
10天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
|
1月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
2月前
|
API
vue3知识点:provide 与 inject
vue3知识点:provide 与 inject
36 4
vue3知识点:provide 与 inject
|
2月前
|
API
vue3知识点:readonly 与 shallowReadonly
vue3知识点:readonly 与 shallowReadonly
26 1
vue3知识点:readonly 与 shallowReadonly
|
1月前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
59 7
|
1月前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
63 3
|
1月前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
48 1
|
1月前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
55 1
|
1月前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef