Vue3.3 正式发布！ 今天，我们很高兴地宣布发布 Vue 3.3 "浪客剑心"！ 此版本专注于改进开发人员体验 ，特别是 SFC script setup 与 TypeScript 的使用。一同发布的还有 1.6 版本的 Vue Language Tools （以前称为 Volar），我们解决了很多 Vue 与 TypeScript 使用上的痛点。 这篇文章概述了 3.3 中重要的特性。完成的更改请查阅GitHub 上的完整更改日志。 “依赖更新 升级到 3.3 时，建议同时更新以下依赖项： volar / vue-tsc@^1.6.4vite@^4.3.5@vitejs/plugin-vue@^4.2.0vue-loader@^17.1.0（如果使用 webpack 或 vue-cli）”script setup + TypeScript 开发体验改善支持类型导入和复杂类型以前，在 defineProps 和 defineEmits 的类型仅支持本地类型，不能使用 import，并且仅支持类型字面量和 interface。这是因为 Vue 需要能够分析 props 接口上的属性，以生成相应的运行时选项。 这个限制现在在 3.3 中得到解决。编译器现在可以解析导入的类型，并支持有限的复杂类型： scriptsetuplang="ts" importtype{Props}from'./foo' //imported+intersectiontype definePropsProps{extraProp?:string}() /script 请注意，对复杂类型支持是基于 AST 的，因此不是 100% 全面的。一些需要实际类型分析的复杂类型，例如条件类型，不受支持。您可以使用条件类型来定义单个 prop 的类型，但不能用于整个 props 对象。 详情： PR#8083泛型组件使用 script setup 的组件现在可以通过 generic 属性接受泛型类型参数： scriptsetuplang="ts"generic="T" defineProps{ items:T[] selected:T }() /script generic 的值与 TypeScript 中 ... 之间的参数列表用法完全相同。例如，您可以使用多个参数、extend 约束、默认类型和引用导入的类型： scriptsetuplang="ts"generic="Textendsstring|number,UextendsItem" importtype{Item}from'./types' defineProps{ id:T list:U[] }() /script 此功能在最新版本的 volar / vue-tsc 中默认启用。 相关讨论： RFC#436相关 PR： generic defineComponent() - PR#7963defineEmits以前，defineEmits 的类型参数仅支持调用签名语法： //以前 constemit=defineEmits{ (e:'foo',id:number):void (e:'bar',name:string,...rest:any[]):void }() 该类型与 emit 的返回类型匹配，但编写起来有点冗长和笨拙。3.3 引入了一种更符合人体工程学的声明带有类型的 emits 的方式： //现在 constemit=defineEmits{ foo:[id:number] bar:[name:string,...rest:any[]] }() 在类型字面量中，key 是事件名称，value 是事件参数的数组类型（使用标记元组元素的方式）。 以前的函数调用签名语法仍然受支持。 使用 defineSlots 设置 slots 类型新的 defineSlots 宏可以声明 slots 及其类型： scriptsetuplang="ts" defineSlots{ default?:(props:{msg:string})=any item?:(props:{id:number})=any }() /script defineSlots()只接受一个类型参数，没有运行时参数。类型参数应该是一个类型字面量 key 是 slot 名称value 是 slot 函数函数的第一个参数是 slot 期望接收的 props，它的类型将用于模板中的 slot props。defineSlots的返回值与 useSlots 返回的 slots 对象相同。 目前存在的限制： volar / vue-tsc 尚未实现 slots 类型检查。slot 函数的返回类型目前是忽略的，是任何类型，但我们可能会在将来利用它进行 slot 内容检查。除了在 script setup 中使用 defineSlots 定义 slots 类型，还能在 defineComponent 中的 slots 属性中定义 import{SlotsType}from'vue' defineComponent({ slots:ObjectasSlotsType{ default:{foo:string;bar:number} item:{data:number} }, setup(props,{slots}){ expectTypeundefined|((scope:{foo:string;bar:number})=any)( slots.default ) expectTypeundefined|((scope:{data:number})=any)(slots.item) } }) 这两个 API 都对运行时没有影响，纯粹作为 IDE 和 vue-tsc 的类型提示。 更多详情： PR#7982实验性功能reactive 解构之前是 Reactivity Transform 提案的一部分（已被废弃），现在已被拆分为单独的功能。 该功能可以解构的 props 并保持响应性，并提供了一种更符合人体工程学的方式来声明 props 的默认值： scriptsetup import{watchEffect}from'vue' const{msg='hello'}=defineProps(['msg']) watchEffect(()={ //在watch和computed中使用msg //能够正常收集依赖，就好像使用props.msg console.log(`msgis:${msg}`) }) /script template{{msg}}/template 此功能是实验性的，需要明确的选择加入。以 Vite 为例： //vite.config.js exportdefault{ plugins:[ vue({ propsDestructure:true }) ] } 详情：RFC#502defineModel以前组件想要支持 v-model，需要两个步骤： 声明 props在打算更新 props 时，emit update:propName 事件子组件支持 v-model 的写法： !--BEFORE-- scriptsetup constprops=defineProps(['modelValue']) constemit=defineEmits(['update:modelValue']) console.log(props.modelValue) functiononInput(e){ emit('update:modelValue',e.target.value) } /script template input:value="modelValue"@input="onInput"/ /template 父组件： scriptsetup import{ref}from'vue' importCompfrom'./Comp.vue' constmsg=ref('') /script template Compv-model="msg" /template Vue 3.3 用新的 defineModel 宏简化了用法。宏将自动注册 props 和事件 ，并返回一个 ref： !--AFTER-- scriptsetup constmodelValue=defineModel() console.log(modelValue.value) /script template inputv-model="modelValue"/ /template 根据接受 defineModel 返回值的变量名，这里是 modelValue，会自动定义 props 名为 modelValue，emit 事件为 update:modelValue 也支持显示传入 props 名称 constcount=defineModelnumber('count',{default:0}) 此功能是实验性的，需要明确的选择加入。 详情： RFC#503其他值得注意的功能defineOptionsdefineOptions 允许直接在 script setup 中声明组件选项，而无需单独的 script 块： scriptsetup defineOptions({inheritAttrs:false}) /script “终于可以快乐地设置组件 name 了 ”toRef、toValue 提供 getter 支持增强 toRef，支持将 values/getters/ref 标准化为 ref： //相当于ref(1) toRef(1) //创建只读ref，使用.value时执行getter toRef(()=props.foo) //返回ref toRef(existingRef) 调用 toRef 类似于 computed，但如果 getter 没有昂贵的计算，toRef 会更高效 toValue 则相反，将 values/getters/ref 标准化为 value： toValue(1)//--1 toValue(ref(1))//--1 toValue(()=1)//--1 详情：PR#7997JSX 导入源支持目前，Vue 的类型自动注册全局 JSX 类型。这可能会与需要 JSX 类型推断的其他库一起使用时发生冲突，特别是 React 从3.3开始，Vue 支持通过 TypeScript 的 jsxImportSource 选项指定 JSX 命名空间。这允许用户根据其需要，选择全局或每个文件的选择加入。 为了向后兼容，3.3 仍然全局注册 JSX 命名空间。我们计划在 3.4 中删除默认的全局注册。如果您正在使用 TSX 与 Vue，请在升级到 3.3后在 tsconfig.json 中添加显式的 jsxImportSource，以避免在 3.4 中出现问题。 按计划，我们的目标是在2023年开始制作较小，更频繁的功能发行版。请继续关注！ 最后如果这篇文章对您有所帮助，可以点赞加收藏??，您的鼓励是我创作路上的最大的动力。也可以关注我的公众号订阅后续的文章：**Candy 的修仙秘籍**（点击可跳转） 原文地址：https://blog.vuejs.org/posts/vue-3-3 阅读原文