Vue 3.3 浪客剑心

news2025/1/23 12:08:18

请添加图片描述

✅创作者:陈书予
🎉个人主页:陈书予的个人主页
🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区
🌟专栏地址: 三十天精通 Vue 3

文章目录

特征

  • sfc: 支持在 SFC 宏中导入类型 ( #8083 )
  • types/slots: defineSlots通过宏和slots选项支持插槽存在/道具类型检查( #7982 ) ( 5a2f5d5 )
  • sfc: 支持更符合人体工程学的 defineEmits 类型语法 ( #7992 ) ( 8876dcc )
  • sfc: 引入defineModel宏和useModel帮助器 ( #8018 ) ( 14f3d74 )
  • reactivity: 改进对反应性 API 中 getter 使用的支持 ( #7997 ) ( 59e8284 )
  • compiler-sfc: 添加 defineOptions 宏 ( #5738 ) ( bcf5841 )
  • types/jsx: 支持 jsxImportSource,避免全局 JSX 冲突 ( #7958 ) ( d0b7ef3 )
  • **dx:**提高道具显示类型的可读性(4c9bfd2)
  • app: app.runWithContext() ( #7451 ) ( 869f3fb )
  • hasInjectionContext() for libraries (#8111) (5510ce3)
  • 允许在模板中访问控制台 ( #6508 ) ( fe76224 ),关闭#7939
  • suspense: <Suspense>为( #6736 ) ( cb37d0b )引入悬念选项,关闭#5513
  • https://github.com/vuejs/core/issues/5513)
  • compiler-dom: 将惰性视为布尔属性 ( #8209 ) ( 918ec8a ),关闭#8208
  • https://github.com/vuejs/core/issues/8208)
  • types: 提供 ExtractPublicPropTypes 实用程序类型 ( bff63c5 ),关闭#5272 #8168
  • compiler-sfc: expose parseCache ( 4576548 ), 关闭#8202https://github.com/vuejs/core/issues/8202)

弃用

  • 弃用:**弃用@vnode钩子以支持 vue:前缀 ( 5f0394a )
  • 弃用:**弃用 v-is 指令 ( bbd8301 )
  • 弃用:**默认情况下在 Options API 中展开注入的引用,弃用 app.config.unwrapInjectedRefs ( 526fa3b )

特征和弃用信息来源地址

今天,我们很高兴地宣布发布 Vue 3.3“浪客剑心”!

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

依赖更新
升级到 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)

一、 < s c r i p t s e t u p > <script setup> <scriptsetup> + TypeScript 开发体验改善

1. 支持类型导入和复杂类型

以前,在 definePropsdefineEmits 的类型仅支持本地类型,不能使用 import,并且仅支持类型字面量和 interface。这是因为 Vue 需要能够分析 props 接口上的属性,以生成相应的运行时选项。

这个限制现在在 3.3 中得到解决。编译器现在可以解析导入的类型,并支持有限的复杂类型

<script setup lang="ts">
import type { Props } from './foo'

// imported + intersection type
defineProps<Props & { extraProp?: string }>()
</script>

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

2. 泛型组件

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

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

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

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

3. defineEmits

以前,defineEmits 的类型参数仅支持调用签名语法:

// 以前
const emit = defineEmits<{
  (e: 'foo', id: number): void
  (e: 'bar', name: string, ...rest: any[]): void
}>()

该类型与 emit 的返回类型匹配,但编写起来有点冗长和笨拙。3.3 引入了一种更符合人体工程学的声明带有类型的 emits 的方式:

// 现在
const emit = defineEmits<{
  foo: [id: number]
  bar: [name: string, ...rest: any[]]
}>()

在类型字面量中,key 是事件名称,value 是事件参数的数组类型(使用标记元组元素的方式)。

以前的函数调用签名语法仍然受支持。

4. 使用 defineSlots 设置 slots 类型

新的defineSlots 宏可以声明 slots 及其类型

<script setup lang="ts">
defineSlots<{
  default?: (props: { msg: string }) => any
  item?: (props: { id: number }) => any
}>()
</script>

defineSlots()只接受一个类型参数,没有运行时参数。类型参数应该是一个类型字面量

  • key 是 slot 名称
  • value 是 slot 函数

defineSlots的返回值useSlots 返回的 slots 对象相同。
目前存在的限制:

  • volar / vue-tsc 尚未实现 slots 类型检查
  • slot 函数的返回类型目前是忽略的,是任何类型,但我们可能会在将来利用它进行 slot 内容检查。

除了在<script setup> 中使用 defineSlots 定义 slots 类型,还能在 defineComponent 中的 slots 属性中定义

import { SlotsType } from 'vue'

defineComponent({
  slots: Object as SlotsType<{
    default: { foo: string; bar: number }
    item: { data: number }
  }>,
  setup(props, { slots }) {
    expectType<undefined | ((scope: { foo: string; bar: number }) => any)>(
      slots.default
    )
    expectType<undefined | ((scope: { data: number }) => any)>(slots.item)
  }
})

这两个 API 都对运行时没有影响,纯粹作为 IDE 和 vue-tsc 的类型提示。

二、实验性功能

1. reactive 解构

之前是 Reactivity Transform 提案的一部分(已被废弃),现在已被拆分为单独的功能。
该功能可以解构的 props 并保持响应性,并提供了一种更符合人体工程学的方式来声明 props 的默认值:

<script setup>
import { watchEffect } from 'vue'

const { msg = 'hello' } = defineProps(['msg'])

watchEffect(() => {
  // 在 watch 和 computed 中使用 msg
  // 能够正常收集依赖,就好像使用 props.msg
  console.log(`msg is: ${msg}`)
})
</script>

<template>{{ msg }}</template>

此功能是实验性的,需要明确的选择加入。以 Vite 为例:

// vite.config.js
export default {
  plugins: [
    vue({
      propsDestructure: true
    })
  ]
}

2. defineModel

以前组件想要支持 v-model,需要两个步骤:

  • 声明 props
  • 在打算更新 props 时emit update:propName 事件

子组件支持 v-model 的写法:

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

父组件:

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'

const msg = ref('')
</script>
<template>
  <Comp v-model="msg">
</template>

Vue 3.3 用新的 defineModel 宏简化了用法。宏将自动注册 props 和事件 ,并返回一个 ref:

<!-- AFTER -->
<script setup>
const modelValue = defineModel()
console.log(modelValue.value)
</script>

<template>
  <input v-model="modelValue" />
</template>

根据接受 defineModel 返回值的变量名,这里是 modelValue,会自动定义 props 名为 modelValue,emit 事件为 update:modelValue

也支持显示传入 props 名称

const count = defineModel<number>('count', { default: 0 })

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

三、其他值得注意的功能

1. defineOptions

defineOptions 允许直接在 <script setup> 中声明组件选项,而无需单独的 <script> 块

<script setup>
defineOptions({ inheritAttrs: false })
</script>

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

四、JSX 导入源支持

目前,Vue 的类型会自动注册全局 JSX 类型。这可能会导致与需要 JSX 类型推断的其他库一起使用时发生冲突,尤其是 React。

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

为了向后兼容,3.3 仍然全局注册 JSX 命名空间。我们计划在 3.4 中移除默认的全局注册。jsxImportSource如果您将 TSX 与 Vue 一起使用,则应在升级到 3.3 后向您添加 explicittsconfig.json以避免在 3.4 中损坏。

原文地址
在这里插入图片描述

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

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

相关文章

【啃书C++Primer5】-编写一个简单C++程序

每个C程序都包含一个或多个函数(function)&#xff0c;其中一个必须命名为main。操作系统通过调用main来运行C程序。下面是一个非常简单的main函数&#xff0c;它什么也不干&#xff0c;只是返回给操作系统一个值: int main() {return 0; }一个函数的定义包含四部分:返回类型(r…

【讨论话题】 工作中应不应该出于好心,帮助同事完成不属于你职责范围内的问题?

前言 职场如战场&#xff0c;职场中经常有一种好心帮忙反而成了义务的乱相存在。我们要做一个好人&#xff0c;同事要防备一些坏人。 勿以善小而不为&#xff0c;勿以恶小而为之 文章目录 前言社群内部讨论社群内部讨论总结师父的回答如何优雅的说不总结 社群内部讨论 先来看…

声音合成——Foley Sound——DECASE项目——多模态智能感知与应用——代码实现(6)

文章目录 概述encoder的编写过程代码编写运行结果问题总结 decoder的编写过程知识补充关于逆卷积 代码编写运行结果总结 Autoencoder模型编写 compile方法 train方法 保存和加载模型模块编写实现代码——autoencoder代码实现代码——train代码实现代码——保存和加载模型的代…

GPT-4最强竞品迎来重磅升级:一次10万token,百页资料一分钟总结完毕

夕小瑶科技说 分享 来源 | 量子位 作者 | 丰色 萧箫 号称ChatGPT“最强竞争对手”的Claude&#xff0c;今天迎来史诗级更新—— 模型记忆力原地起飞&#xff0c;现在1分钟看完一本数万字的小说&#xff0c;已经不在话下。 消息一出&#xff0c;评论区直接炸了&#xff0c;网友…

HTTP第九讲——你能写出正确的网址吗?

应该用什么来标记服务器上的资源呢&#xff1f;怎么区分“这个”资源和“那个”资源呢&#xff1f; 用的是 URI&#xff0c;也就是统一资源标识符&#xff08;Uniform Resource Identifier&#xff09;。因为它经常出现在浏览器的地址栏里&#xff0c;所以俗称为“网络地址”&a…

猫妹人生中的第一张Python证书长这样(1)

小朋友们好&#xff0c;大朋友们好&#xff01; 我是猫妹&#xff0c;一名爱上Python编程的小学生。 欢迎和猫妹一起&#xff0c;快乐学习&#xff0c;茁壮成长&#xff01; 猫妹和她的朋友们 猫妹和她的朋友们有两层含义。 一是新的合集名称&#xff0c;在这个合集里面&am…

redis从零开始(3)----基本类型hyperloglog/geo/stream

接上文 redis基本类型 HyperLogLog 简介 HyperLogLog是用于「统计基数」的数据集合类型&#xff0c;基数统计就是指统计一个集合中不重复的元素个数&#xff0c; 但是准确率不是百分百&#xff0c;即他可以提供不精确的去重计数。HyperLogLog 的优点是&#xff0c;在输入元素…

.Net平台下OpenGL绘制图形(1)(VS2019,Winform,C#)

1、介绍 OpenGL&#xff08;英语&#xff1a;Open Graphics Library&#xff0c;译名&#xff1a;开放图形库或者“开放式图形库”&#xff09;是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口&#xff08;API&#xff09;。这个接口由近350个不同的函数调用组成…

【图解KMP算法】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 找出字符串中第一个匹配项的下标 1.什么是KMP…

Windows 下 VMware 虚拟机的 vmdk 文件的压缩

在 Windows 下玩虚拟机&#xff0c;一般大家都会安装 VMware 软件&#xff0c;然后通过软件安装其它操作系统环境&#xff08;如 Linux&#xff09;来模拟各个服务器环境。然而大家在使用过程中可以发现这样一个问题&#xff0c;那就是每个操作系统对应主机磁盘目录中&#xff…

与小我11岁的人一次PK

基本情况 时间过得很快&#xff0c;如同流水一般。 我的同事F已经离职一段时间了&#xff0c;怎么说呢&#xff1f; 公司领导的想让我们进行PK,谁是胜利者&#xff0c;谁留下&#xff0c;这的确与别的公司不同&#xff0c;别的公司通过面试&#xff0c;公司领导感觉那样不足体…

STC15单片机+nRF24L01硬件SPI通讯

STC15单片机+nRF24L01硬件SPI通讯 📍相关篇《STC15单片机+nRF24L01通讯利用PCA输入捕获触发》🔖验证对象:STC15L2K60S2📍STC15L2K60S2自制系统板硬件开源地址:https://oshwhub.com/perseverance51/stc15l2k60s2-ji-tong-ban⏱时钟频率:11.0592MHz🌼NRF24L01模块以及…

C#串口通信从入门到精通(11)——串口接收的数据存储到本地文件(txt、csv)

文章目录 前言一、将数据以CSV格式进行存储二、将数据以TXT格式进行存储三、全部代码前言 我们在串口通信程序开发中经常需要将串口接收到的数据存储到本地电脑,本文就来介绍如何在串口通信中将数据进行存储 一、将数据以CSV格式进行存储 我们将软件选择为csv文件存储,如下…

搭建React Native开发环境

1.安装node node.js官网 需要确定自己安装的版本是否是12版本以上 node -v 2.安装yarn npm install -g yarn 3.安装 Android Studio 这是官网推荐的安装地址: android studio 国内用户可能无法打开官方链接&#xff0c;请自行使用搜索引擎搜索可用的下载链接。安装界面中选…

一个27岁妹子的软件测试之路

艰难的测试之路 2023年&#xff0c;现在这个大环境下&#xff0c;软件测试行业卷麻了&#xff0c;应该说不仅仅软件测试这行&#xff0c;而是整个IT行业都卷麻了&#xff0c;但最卷的还是前端&#xff0c;真的是卷的发紫&#xff0c;今天想和大家聊聊我认识的一个妹子&#xf…

基于SpringBoot+Mybatis-plus+Myslq+ElementVue大学生健康档案管理系统

基于SpringBootMybatisMyslqElementVue大学生健康档案管理系统 一、系统介绍1、系统主要功能&#xff1a;2.涉及技术框架&#xff1a;3.本项目所用环境&#xff1a; 二、功能展示三、其它系统四、获取源码 一、系统介绍 1、系统主要功能&#xff1a; 项目分为个人信息、个人健…

使用 @Autowired 依赖注入时警告不建议使用字段注入

文章目录 字段注入缺点无法注入 final 字段与 Spring 容器耦合度高 构造器注入&#xff08;Spring 官方推荐&#xff09;Setter 方法注入 在 Spring 中注入依赖时有字段注入、构造器注入、Setter 方法注入三种注入方式。 字段注入缺点 无法注入 final 字段 在 Spring 2.5 中引…

【C++】8.编译:CMake工具入门

&#x1f60f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f60f;这篇文章主要介绍CMake工具的入门使用。————————————————学其所用&#xff0c;用其所学。——梁启超————————————————— 欢迎来到我的博客&#xff0c;一起学习知识…

Istio Ambient Mesh L4: 剖析ztunnel组件的工作原理

前言 早在2021年&#xff0c;Istio就开始了共享代理模式的探索&#xff0c;并于2022年9月推出的Ambient Mesh——无Sidecar的全新数据平面模式&#xff0c;目前还未发布正式版本。 这篇博客是花了好多时间收集整理出来的&#xff0c;按照学习思路&#xff0c;先简介了 Istio …

vue3项目搭建超详解

vue3安装与目录讲解 文章目录 vue3安装与目录讲解安装node.jsnpm绑定淘宝镜像安装vue脚手架创建vue项目目录解释推荐使用vscode 安装node.js http://nodejs.cn/download/ 根据自己电脑的位数自行下载。可安装到任意盘哈&#xff0c;因为我C盘比较大&#xff0c;我就直接在C盘了…