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)

目录

    • 宏中的类型导入和复杂类型
    • 泛型组件
    • 更符合人体工程学的定义defineemits
    • 带定义插槽的类型化插槽
  • 实验性功能

    • reactive 解构
    • defineModel
  • 其他值得注意的功能

    • defineOptions
    • Better Getter Support Width toRef and toValue
    • JSX 导入源支持
  • 维护基础设施改进

<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 对象使用。

  • 详细信息: PR#8083

泛型组件

使用 <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 中默认启用。

  • 讨论: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 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

  • 详细信息: 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 :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>

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

  • 详细信息: 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)

toReftoValue 之间的关系类似于 refunref 之间的关系,主要区别在于 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 年开始发布更小、更频繁的功能版本。敬请期待!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/78767.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HP惠普暗影精灵8P笔记本OMEN 17.3 英寸游戏本 17-ck1000(509V8AV)原厂Win11系统22H2

适用型号&#xff1a; 17-ck1000TX、17-ck1001TX、17-ck1002TX、17-ck1003TX、17-ck1004TX、17-ck1006TX、17-ck1007TX、17-ck1008TX 原装出厂系统自带所有驱动、出厂主题壁纸、Office办公软件、MyHP、惠普电脑管家、OMEN Command Center等预装程序 链接&#xff1a;https:/…

Kernel for SQL Database Recovery 21.1 Crack

SQL Server恢复工具 Kernel for SQL Database Recovery 21.1 具有针对不同 SQL Server 版本的全面恢复选项。它具有预览和选择功能来恢复精确的数据库对象。 好处 SQL 数据库恢复可为您带来多种好处。 完全恢复所有数据库组件 将损坏的 MDF/NDF 文件有效恢复到 Live SQL Serve…

DC/DC开关电源学习笔记(五)开关电源的主要技术指标

(五)开关电源的主要技术指标 1.输入参数2.输出参数3.效率4.电压调整率和负载调整率5.动态特性:负载突变时输出电压的变化6.电源启动时间(Set-Up Time)与保持时间(Hold-Up Time)1.输入参数 输入电压大小,交流还是直流,相数,频率等。 2.输出参数 输出功率,输出电压,输出…

SVN 索引版本与打包版本号不匹配

今天突然遇到了一个问题&#xff0c;SVN上传不了&#xff0c;错误提示如下&#xff1a; 解决方法&#xff1a; 1.其实&#xff0c;这是SVN库不小心搞坏了&#xff0c;只能重新再创建一个SVN仓库了。

linux7上powerpath卸载

umount挂接点后&#xff0c;直接卸载powerpath告警 [roothydb2 ~]# rpm -qa |grep EMCpower EMCpower.LINUX-6.3.0.01.00-001.ol7.x86_64 [roothydb2 ~]# rpm -e EMCpower.LINUX-6.3.0.01.00 Unable to remove devices from the PowerPath configuration Please make sure no …

C++日期类实现(联系类和对象)

目录 一.6个默认成员函数 二.基本功能函数 三.日期与天数的加减 四.前后置和-- 五.比较运算符重载 六.日期减日期 七.全部代码 1.Date.h 2.Date.cpp C初学者都可以在学习完类和对象后写一个日期类&#xff0c;以下是实现细节。 一.6个默认成员函数 对于日期类默认成员函…

WPS或EXCEL表格单元格下拉快捷选择项修改及设置方法

WPS或新版本EXCEL的设置下拉选项的方法是.点击一个单元格,菜单上选择数据,下拉列表即可设置,双击文字可编辑 EXCEL 旧的版本不同,可能有不同方法 方法一, 1.在空白区域里面&#xff0c;准备好需要填入下拉菜单里面的内容。 2.选中一个需要添加下拉菜单的单元格&#xff0c;然后…

pcl--第三节 关键点

简介 关键点也称为兴趣点&#xff0c;它是 2D 图像或 3D 点云或曲面模型上,可以通过检测标准来获取的具有稳定性、区别性的点集。从技术上来说,关键点的数量比原始点云或图像的数据量少很多&#xff0c;其与局部特征描述子结合组成关键点描述子。常用来构成原始数据的紧凑表示…

嵌入式Linux驱动开发(I2C专题)(一)

一、I2C协议 1.1、硬件连接 I2C在硬件上的接法如下所示&#xff0c;主控芯片引出两条线SCL,SDA线&#xff0c;在一条I2C总线上可以接很多I2C设备。 1.2、IIC传输数据的格式 1.2.1、写操作 流程如下&#xff1a; 主芯片要发出一个start信号然后发出一个设备地址(用来确定是…

【LangChain系列 9】Prompt模版——MessagePromptTemplate

原文地址&#xff1a;【LangChain系列 9】Prompt模版——MessagePromptTemplate 本文速读&#xff1a; MessagePromptTemplate MessagesPlaceholder 在对话模型(chat model) 中&#xff0c; prompt主要是封装在Message中&#xff0c;LangChain提供了一些MessagePromptTemplat…

javaee spring整合mybatis spring帮我们创建dao层

项目结构 pom依赖 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/P…

Function之Bluetooth模块

0 Preface/Foreword 1 数据结构 1.1 func_bt_t typedef struct{u16 warning_status;u8 disp_status;u8 hid_menu_flag;u8 hid_discon_flag;u8 siri_kl_flag;u8 user_kl_flag;u8 tws_status;u8 ble_status;u8 bt_is_inited;u8 rec_pause : 1;u8 pp_2_unmute : 1;u8 need_p…

HSRP(热备份路由选择协议)的概念,原理与配置实验

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 梦想从未散场&#xff0c;传奇永不落幕&#xff0c;持续更新优质网络知识、Python知识、Linux知识以及各种小技巧&#xff0c;愿你我共同在CSDN进步 目录 一、了解HSRP协议 1. 什么是HSRP协议 2、HSRP协议的…

Pycharm 安装第三方库numpy,显示超时?

一、配置终端Terminal中的镜像源 1.更改pip源&#xff0c;在终端输入如下命令 pip config set global.index-url https://pypi.tuna.tshua.edu.cn/simple2.在终端使用pip install 安装第三方库 例如: pip install numpy二、配置仓库镜像源 1.第一步: 2.第二步&#xff1a;输…

怎么获取别人店铺的商品呢?

jd.item_search_shop(获得店铺的所有商品) 为了进行电商平台 的API开发&#xff0c;首先我们需要做下面几件事情。 1&#xff09;开发者注册一个账号 2&#xff09;然后为每个JD应用注册一个应用程序键&#xff08;App Key) 。 3&#xff09;下载JDAPI的SDK并掌握基本的API…

4.docker容器编排(docker compose 与 docker swarm)

本文目录 1.容器编排2.Docker Compose1.Docker Compose 安装2.Docker Compose 示例1.使用 docker-compose 启动 nginx2.docker compose 常用命令3.校验 docker-compose.yml 是否有错误4.创建服务&#xff0c;启动容器5.弹性伸缩<扩缩容> 3.Docker Swarm1.Swarm 架构图2.S…

2023.9.6 Redis 的基本介绍

目录 Redis 的介绍 Redis 用作缓存和存储 session 信息 Redis 用作数据库 消息队列 消息队列是什么&#xff1f; Redis 用作消息队列 Redis 的介绍 特点&#xff1a; 内存中存储数据&#xff1a;奠定了 Redis 进行访问和存储时的快可编程性&#xff1a;支持使用 Lua 编写脚…

【Flink】 FlinkCDC读取Mysql( DataStream 方式)(带完整源码,直接可使用)

简介: FlinkCDC读取Mysql数据源,程序中使用了自定义反序列化器,完整的Flink结构,开箱即用。 本工程提供 1、项目源码及详细注释,简单修改即可用在实际生产代码 2、成功编译截图 3、自己编译过程中可能出现的问题 4、mysql建表语句及测试数据 5、修复FlinkCDC读取Mys…

软件测试/测试开发丨Web自动化—capability参数配置 学习笔记

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/27336 一、capability概述 capability是webdriver支持的标准命令之外的扩展命令&#xff08;配置信息&#xff09;配置web驱动属性&#xff0c;如浏览器名…

leetcode分类刷题:二叉树(一、简单的层序遍历)

二叉树的深度优先遍历题目是让我有点晕&#xff0c;先把简单的层序遍历总结下吧&#xff1a;配合队列进行的层序遍历在逻辑思维上自然直观&#xff0c;不容易出错 102. 二叉树的层序遍历 本题是二叉树的层序遍历模板&#xff1a;每次循环将一层节点出队&#xff0c;再将一层节点…