一文了解Vue3.3新特性

最新推荐文章于 2025-10-15 16:29:38 发布

原创最新推荐文章于 2025-10-15 16:29:38 发布 · 890 阅读

1 ·

CC 4.0 BY-SA版权

SmallTeddy

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

48 篇文章

订阅专栏

Vue3.3引入了在<scriptsetup>中使用导入类型和复杂类型的能力，支持泛型组件和更便捷的defineEmits。此外，响应式的props解构和新的defineModel宏简化了代码，同时增强了插槽的类型定义。文章还提到了实验性功能，如解构props的响应性及改进的基础设施，以提升开发效率。

导入和复杂类型支持的宏定义中的类型： 在 Vue 3.3 中，您可以在使用 <script setup> 的组件中使用导入的类型，并支持一些复杂类型。这意味着您可以从其他文件导入类型，并在组件中使用它们。例如，您可以使用交叉类型来定义组件的属性，并在其中包含额外的属性。
泛型组件： 在 <script setup> 中编写的组件现在可以接受泛型类型参数。这使得组件更加通用，可以处理不同类型的数据。您可以在泛型中定义多个参数、扩展约束、默认类型和引用导入的类型。
更便捷的 defineEmits： 在之前的版本中，您需要使用调用签名语法来声明 defineEmits 的事件类型。但在 Vue 3.3 中，您可以使用更简洁和方便的方式来声明事件。您可以使用事件名作为键，参数列表的数组类型作为值，以指定事件的参数。
具有类型的插槽： 新增的 defineSlots 宏定义允许您声明预期的插槽及其对应的插槽属性。通过 defineSlots 宏定义，您可以明确指定插槽的名称、预期接收的属性类型以及在模板中使用插槽时的属性类型。这有助于提供更好的类型检查和编辑器支持。

此外，还有一些实验性功能：

响应式的 props 解构： 此功能之前是 Reactivity Transform 的一部分，现在被拆分为一个独立的特性。它允许解构的 props 保持响应性，并提供了一种更便捷的方式来声明 props 的默认值。
defineModel： 之前，为了支持与 v-model 的双向绑定，组件需要声明一个 prop，并在更新 prop 时发出相应的 update:propName 事件。Vue 3.3 引入了 defineModel 宏定义，可以自动注册 prop，并返回一个可直接修改的 ref，简化了双向绑定的使用方式。

除了这些特性之外，Vue 3.3 版本还进行了一些维护基础设施的改进，以提升构建速度、测试速度和类型生成速度，并引入了全面的回归测试。