后端电池宝
5 月 11 日，Vue 3.3 正式宣布正式宣布发布，SS Rurouni Kenshin。此次预览主要就特别针对开发人员新体验展开了改良，的的采用 TypeScript 时的 SFC <script setup>。与 Vue 词汇辅助工具（从前称作 Volar）1.6 的正式宣布发布并重，化解了在采用 TypeScript 时存有的很多长年所苦难题。上面就来看一看 Vue 3.3 版中的重点项目机能！
当升级换代到 Vue 3.3 时，提议与此同时预览下列倚赖项：
volar / vue-tsc @ ^1.6.4vite @ ^4.3.5@vitejs/plugin-vue @ ^4.2.0vue-loader @ ^17.1.0（假如采用 webpack 或 vue-cli）SFC中的 <script setup> 和 TypeScript DX 改良
宏中的引入和繁杂类别全力支持
在以后的版中，用作 defineProps 和 defineEmits 的类别模块边线采用的类别被管制为邻近地区类别，因此仅全力支持类别字面上量和USB。这原因在于 Vue 须要能预测 props USB上的特性以聚合适当的运转时快捷键。
此管制也已在 3.3 中化解。C++那时能导出引入的类别，并全力支持几组非常有限的繁杂类别：
<script setup lang=“ts”>
import type { Props } from ./foo// imported + intersection typedefineProps
/script>
注意，繁杂类别全力支持是基于AST的，因此不是 100% 全面的。不全力支持一些须要实际类别预测的繁杂类别，例如条件类别。能对单个props 的类别采用条件类别，但不能对整个 props 对象采用条件类别。
通用组件
采用＜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 ./typesdefineProps<{
id: T
list: U[]
}>()
</script>
这个机能从前须要显式地选择，但那时在最新版的 volar / vue-tsc 中已经默认启用了。
更符合人体工程学的 defineEmits
从前，defineEmits 的类别模块只全力支持调用签名语法：
constemit = defineEmits<{
(e: foo, id: number): void (e: bar, name: string, …rest: any[]): void}>()
该类别与 emit 的返回类别相匹配，但编写起来有点冗长和笨拙。3.3 引入了一种更符合人体工程学的声明具有类别的 emit 的方法：
constemit = defineEmits<{
foo: [id: number]
bar: [name: string, …rest: any[]]
}>()
在类别字面上量中，键是事件名称，值是指定附加模块的数组类别。虽然不是必需的，但能采用带标签的元组元素来明确表示，就像上面的示例中一样。
调用签名语法仍然受全力支持。
采用 defineSlots 的类别插槽
新的 defineSlots 宏可用作声明预期的插槽及其适当的预期插槽 props：
<script setup lang=“ts”>
defineSlots<{
default?: (props: { msg: string }) =>any
item?: (props: { id: number }) =>any
}>()
</script>
defineSlots() 只接受类别模块，不接受运转时模块。类别模块应该是类别字面上量，其中特性键是插槽名称，值是插槽函数。该函数的第一个模块是插槽期望接收的 props，其类别将用作模板中的插槽 props。defineSlots 的返回值与 useSlots 返回的插槽对象相同。
当前的一些管制：
volar / vue-tsc 中尚未实现必需的插槽检查。插槽函数返回类别目前被忽略，能是 any 类别，但将来可能会利用它来检查插槽内容。defineComponent 用法也有对应的 slots 快捷键。这两个 API 都没有运转时影响，因此纯粹用作 IDE 和 vue-tsc 的类别提示。
实验机能
响应式 Props 解构
从前是那时已删除的 Reactivity Transform 的一部分，响应式 props 解构已拆分为单独的机能。
该机能允许解构的 props 保持响应性，并提供更符合人体工程学的声明 props 默认值的方式：
import { watchEffect } from vueconst { msg = hello } = defineProps([msg])
watchEffect(() =>{
// 在 watchers 和 computed getters 中访问 `msg` // 将其作为倚赖项展开跟踪，就像访问 `props.msg` 一样 console.log(`msg is: ${msg}`)
})
</script>
<template>{{ msg }}</template>
defineModel
从前，对于全力支持与 v-model 双向绑定的组件，它须要（1）声明一个 prop 和（2）在打算预览 prop 时发出适当的 update:propName 事件：
const props = defineProps([modelValue])
const emit = defineEmits([update:modelValue])
console.log(props.modelValue)
function onInput(e){
emit(update:modelValue, e.target.value)
}
</script>
<input :value=”modelValue” @input=”onInput” />
</template>
3.3 采用新的 defineModel 宏简化了采用。宏会自动注册一个 prop，并返回一个能直接改变的ref：
constmodelValue = defineModel()
console.log(modelValue.value)
</script>
<input v-model=”modelValue” />
</template>
其他特性
defineOptions
新的 defineOptions 宏允许直接在 <script setup> 中声明组件快捷键，而不须要单独的 <script> 块：
defineOptions({inheritAttrs: false})
</script>
采用 toRef 和 toValue 实现更好的 getter 全力支持
toRef 已得到增强以全力支持将值/getters/现有 refs 规范化为 refs：
// 相当于 ref(1)toRef(1)
// 创建一个 readonly ref，在 .value 访问时调用 gettertoRef(() =>props.foo)
// 按原样返回现有 refstoRef(existingRef)
采用 getter 调用 toRef 类似于 computed，但是当 getter 只执行特性访问而没有昂贵的计算时，能更高效。
新的 toValue辅助工具方法提供相反的机能，即将值/ getter / ref 规范化为值：
toValue(1) // –> 1toValue(ref(1)) // –> 1toValue(() => 1) // –> 1toValue 能在组合式函数中代替 unref，以便组合式函数能接受 getter 作为响应式数据源：
// 从前：分配不必要的中间引用useFeature(computed(() =>props.foo))
useFeature(toRef(props, foo))
// 那时：更高效和简洁useFeature(() =>props.foo)
toRef 和 toValue 之间的关系类似于 ref 和 unref之间的关系，主要就区别在于getter 函数的特殊处理。
JSX 引入源全力支持
当前，Vue 的类别自动注册全局 JSX 类别。这可能会与须要 JSX 类别推断的其他库一起采用时产生冲突，特别是 React。
从 3.3 开始，Vue 全力支持通过 TypeScript 的jsxImportSource 快捷键指定 JSX 命名空间，这允许用户基于其用例选择全局或每个文件的选择。
为了向后兼容，3.3 仍然全局注册 JSX 命名空间。计划在 3.4 中删除默认的全局注册。假如正在采用 TSX 和 Vue，请在升级换代到 3.3 后在tsconfig.json 中添加显式的 jsxImportSource，以避免在 3.4 中出现难题。
维护基础设施改良
此版建立在很多维护基础设施改良的基础上，这使得 Vue 团队能更有信心地更快地行动：
通过将类别检查与汇总构建分开并从 rollup-plugin-typescript2移动到rollup-plugin-esbuild，构建速度提高 10 倍。通过从 Jest 转移到 Vitest 来加快测试速度。通过从 @microsoft/api-extractor 转移到 rollup-plugin-dts 来更快地聚合类别。通过 ecosystem-ci 展开综合回归测试，在正式宣布发布前捕获主要就生态系统倚赖项中的回归。按照计划，Vue 团队的目标是在 2023 年开始正式宣布发布更小、更频繁的机能版，敬请期待！
参考：https://blog.vuejs.org/posts/vue-3-3
—END—
推荐↓↓↓
