大家好，我是Echa。

好消息，2023年5月11号Vue 官方团队宣布 Vue 3.3 正式发布，代号 “Rurouni Kenshin”。本次更新主要针对开发者体验进行了改进，特别是在使用 TypeScript 时的 SFC <script setup>。与 Vue 语言工具（以前称为 Volar）1.6 的发布相结合，解决了在使用 TypeScript 时存在的许多长期困扰问题。下面就来看看 Vue 3.3 版本中的重点功能！顺便回顾一下小编最近发布的Vue 咨询知识点：

Vue 完美搭档 Volar 细聊未来

Vite 4.3 正式发布

重磅！Vue.js框架官方能力认证正式推出

React团队建议：Create React App 替换成 Vite

Vue 语言工具 （Volar）

当升级到 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） 什么是 Vue

官网：

Github：

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

下面是一个最基本的示例：

import { createApp } from 'vue'createApp({  data() {    return {      count: 0    }  }}).mount('#app')

<div id="app">  <button @click="count++">    Count is: {{ count }}  </button></div>

上面的示例展示了 Vue 的两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

渐进式框架

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML在任何页面中作为 Web Components 嵌入单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jamstack / 静态站点生成 (SSG)开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

Vue.js 官网

Vue 3.3 升级要点SFC中的<script setup>和 TypeScript DX 改进宏中的导入和复杂类型支持通用组件更符合人体工程学的 defineEmits使用 defineSlots 的类型插槽实验功能响应式 Props 解构defineModel其他特性defineOptions使用 toRef 和 toValue 实现更好的 getter 支持JSX 导入源支持维护基础设施改进SFC中的<script setup>和 TypeScript DX 改进

宏中的导入和复杂类型支持

在之前的版本中，用于 defineProps 和 defineEmits 的类型参数位置使用的类型被限制为本地类型，并且仅支持类型字面量和接口。这是因为 Vue 需要能够分析 props 接口上的属性以生成相应的运行时选项。

此限制现已在 3.3 中解决。编译器现在可以解析导入的类型，并支持一组有限的复杂类型：

<script setup lang="ts">import type { Props } from './foo'// imported + intersection typedefineProps<Props & { extraProp?: string }>()</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 './types'defineProps<{  id: T  list: U[]}>()</script>

这个功能以前需要显式地选择，但现在在最新版本的 volar / vue-tsc 中已经默认启用了。

更符合人体工程学的 defineEmits

以前，defineEmits 的类型参数只支持调用签名语法：

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

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

const emit = 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 默认值的方式：

<script setup>import { watchEffect } from 'vue'const { 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 事件：

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

<script setup>const modelValue = defineModel()console.log(modelValue.value)</script><template>  <input v-model="modelValue" /></template>

defineOptions

新的 defineOptions 宏允许直接在 <script setup> 中声明组件选项，而不需要单独的 <script> 块：

<script setup>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) // --> 1

toValue 可以在组合式函数中代替 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 年开始发布更小、更频繁的功能版本，敬请期待！

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。