提供信息门户网站建设,珠海网站建设网,哪家高端网站建设好,电梯网站建设本文为翻译
原文地址#xff1a;宣布推出 Vue 3.3 |The Vue Point (vuejs.org) 今天我们很高兴地宣布 Vue 3.3 “Rurouni Kenshin” 的发布#xff01;
此版本侧重于开发人员体验改进 - 特别是 TypeScript 的 SFC script setup 使用。结合 Vue Language Tools…本文为翻译
原文地址宣布推出 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.4vite^4.3.5vitejs/plugin-vue^4.2.0vue-loader^17.1.0 如果使用 webpack 或 vue-cli 目录 宏中的类型导入和复杂类型泛型组件更符合人体工程学的定义defineemits带定义插槽的类型化插槽 实验性功能 reactive 解构defineModel 其他值得注意的功能 defineOptionsBetter Getter Support Width toRef and toValueJSX 导入源支持 维护基础设施改进
script setup typescript DX 改进
宏中对类型导入和复杂类型的支持
以前在 defineProps 和 defineEmits 的类型参数位置中使用的类型仅限于本地类型并且仅支持类型文本和接口。这是因为 Vue 需要能够分析 props 接口上的属性以便生成相应的运行时选项。
此限制现已在 3.3 中解决。编译器现在可以解析导入的类型并支持一组有限的复杂类型 script setup langts import type { Props } from ./foo // imported intersection type definePropsProps { extraProp?: string }() /script
请注意复杂类型支持是基于 AST 的因此不是 100% 全面的。不支持一些需要实际类型分析的复杂类型例如条件类型。您可以将条件类型用于单个 props 的类型但不能对整个 props 对象使用。
详细信息 PR#8083
泛型组件
使用 script setup 的组件现在可以通过 generic 属性接受泛型类型参数 script setup langts genericT defineProps{ items: T[] selected: T }() /script
generic 的值与 TypeScript 中的...参数列表完全相同。例如可以使用多个参数、extends 约束、默认类型和引用导入的类型 script setup langts genericT extends string | number, U extends Item import type { Item } from ./types defineProps{ id: T list: U[] }() /script
此功能以前需要明确的选择加入但现在在最新版本的 volar/vue-tsc 中默认启用。
讨论RFC#436相关 generic defineComponent() - PR#7963
更符合人体工程学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 langts 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
详细信息 PR#7982
实验性功能
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
此功能是实验性的需要明确选择加入。
详细信息 RFC#502
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 :valuemodelValue inputonInput / /template
3.3 简化了新宏的使用。defineModel 宏会自动注册一个 prop并返回一个可以直接变异的 ref !-- AFTER -- script setup const modelValue defineModel() console.log(modelValue.value) /script template input v-modelmodelValue / /template
此功能是实验性的需要明确选择加入。
详细信息 RFC#503
其他值得注意的功能
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)
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 后在tsconfig.json显式添加 jsxImportSource以避免在 3.4 中出现损坏。
维护基础设施改进
此版本基于许多维护基础架构改进使我们能够更快地、更自信地移动
通过将类型检查与汇总版本分离并从 rollup-plugin-typescript2 更换为 rollup-plugin-esbuild将生成速度提高 10 倍。通过从 Jest 更换为 Vitest 来加快测试速度。通过从 microsoft/api-extractor 更换为 rollup-plugin-dts 来更快地生成类型。通过生态系统-ci进行全面的回归测试 - 在发布之前捕获主要生态系统依赖项的回归
按照计划我们的目标是在 2023 年开始发布更小、更频繁的功能版本。敬请期待
