大家好，我是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 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）

什么是 Vue

官网：https://vuejs.org/

Github：https://github.com/vuejs/

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 3.3 升级要点

1. SFC中的<script setup>和 TypeScript DX 改进

• 宏中的导入和复杂类型支持
• 通用组件
• 更符合人体工程学的 defineEmits
• 使用 defineSlots 的类型插槽

2. 实验功能

• 响应式 Props 解构
• defineModel

3. 其他特性

• defineOptions
• 使用 toRef 和 toValue 实现更好的 getter 支持
• JSX 导入源支持

4. 维护基础设施改进

SFC中的<script setup>和 TypeScript DX 改进

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

在之前的版本中，用于 defineProps 和 defineEmits 的类型参数位置使用的类型被限制为本地类型，并且仅支持类型字面量和接口。这是因为 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 对象使用条件类型。

通用组件

使用＜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 访问时调用 getter
toRef(() => props.foo)
// 按原样返回现有 refs
toRef(existingRef)

使用 getter 调用 toRef 类似于 computed，但是当 getter 只执行属性访问而没有昂贵的计算时，可以更高效。

新的 toValue 工具方法提供相反的功能，即将值/ getter / ref 规范化为值：

toValue(1) //       --> 1
toValue(ref(1)) //  --> 1
toValue(() => 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 年开始发布更小、更频繁的功能版本，敬请期待！

最后

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

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

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