Vue 3.3 正式發(fā)布，代號：Rurouni Kenshin
5 月 11 日，Vue 3.3 正式發(fā)布，代號 Rurouni Kenshin。本次更新主要針對開發(fā)者體驗(yàn)進(jìn)行了改進(jìn)，特別是在使用 TypeScript 時的 SFC <script setup>。與 Vue 語言工具（以前稱為 Volar）1.6 的發(fā)布相結(jié)合，解決了在使用 TypeScript 時存在的許多長期困擾問題。下面就來看看 Vue 3.3 版本中的重點(diǎn)功能！
當(dāng)升級到 Vue 3.3 時，建議同時更新以下依賴項(xiàng)：
- volar / vue-tsc @ ^1.6.4
- vite @ ^4.3.5
- @vitejs/plugin-vue @ ^4.2.0
- vue-loader @ ^17.1.0（如果使用 webpack 或 vue-cli）
SFC中的 <script setup> 和 TypeScript DX 改進(jìn)
宏中的導(dǎo)入和復(fù)雜類型支持
在之前的版本中，用于 defineProps 和 defineEmits 的類型參數(shù)位置使用的類型被限制為本地類型，并且僅支持類型字面量和接口。這是因?yàn)?Vue 需要能夠分析 props 接口上的屬性以生成相應(yīng)的運(yùn)行時選項(xiàng)。
此限制現(xiàn)已在 3.3 中解決。編譯器現(xiàn)在可以解析導(dǎo)入的類型，并支持一組有限的復(fù)雜類型：
<script setup lang="ts">
import type { Props } from './foo'
// imported + intersection type
defineProps<Props & { extraProp?: string }>()
</script>注意，復(fù)雜類型支持是基于AST的，因此不是 100% 全面的。不支持一些需要實(shí)際類型分析的復(fù)雜類型，例如條件類型?？梢詫蝹€ props 的類型使用條件類型，但不能對整個 props 對象使用條件類型。
通用組件
使用＜script setup＞的組件現(xiàn)在可以通過 generic 屬性接受泛型類型參數(shù)：
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>generic 的值與 TypeScript 中 <...> 之間的參數(shù)列表完全相同。例如，可以使用多個參數(shù)、extends約束、默認(rèn)類型和引用導(dǎo)入類型：
<script setup lang="ts" generic="T extends string | number, U extends Item">
import type { Item } from './types'
defineProps<{
id: T
list: U[]
}>()
</script>這個功能以前需要顯式地選擇，但現(xiàn)在在最新版本的 volar / vue-tsc 中已經(jīng)默認(rèn)啟用了。
更符合人體工程學(xué)的 defineEmits
以前，defineEmits 的類型參數(shù)只支持調(diào)用簽名語法：
const emit = defineEmits<{
(e: 'foo', id: number): void
(e: 'bar', name: string, ...rest: any[]): void
}>()該類型與 emit 的返回類型相匹配，但編寫起來有點(diǎn)冗長和笨拙。3.3 引入了一種更符合人體工程學(xué)的聲明具有類型的 emit 的方法：
const emit = defineEmits<{
foo: [id: number]
bar: [name: string, ...rest: any[]]
}>()在類型字面量中，鍵是事件名稱，值是指定附加參數(shù)的數(shù)組類型。雖然不是必需的，但可以使用帶標(biāo)簽的元組元素來明確表示，就像上面的示例中一樣。
調(diào)用簽名語法仍然受支持。
使用 defineSlots 的類型插槽
新的 defineSlots 宏可用于聲明預(yù)期的插槽及其相應(yīng)的預(yù)期插槽 props：
<script setup lang="ts">
defineSlots<{
default?: (props: { msg: string }) => any
item?: (props: { id: number }) => any
}>()
</script>defineSlots() 只接受類型參數(shù)，不接受運(yùn)行時參數(shù)。類型參數(shù)應(yīng)該是類型字面量，其中屬性鍵是插槽名稱，值是插槽函數(shù)。該函數(shù)的第一個參數(shù)是插槽期望接收的 props，其類型將用于模板中的插槽 props。defineSlots 的返回值與 useSlots 返回的插槽對象相同。
當(dāng)前的一些限制：
- volar / vue-tsc 中尚未實(shí)現(xiàn)必需的插槽檢查。
- 插槽函數(shù)返回類型目前被忽略，可以是 any 類型，但將來可能會利用它來檢查插槽內(nèi)容。
defineComponent 用法也有對應(yīng)的 slots 選項(xiàng)。這兩個 API 都沒有運(yùn)行時影響，并且純粹用作 IDE 和 vue-tsc 的類型提示。
實(shí)驗(yàn)功能
響應(yīng)式 Props 解構(gòu)
以前是現(xiàn)在已刪除的 Reactivity Transform 的一部分，響應(yīng)式 props 解構(gòu)已拆分為單獨(dú)的功能。
該功能允許解構(gòu)的 props 保持響應(yīng)性，并提供更符合人體工程學(xué)的聲明 props 默認(rèn)值的方式：
<script setup>
import { watchEffect } from 'vue'
const { msg = 'hello' } = defineProps(['msg'])
watchEffect(() => {
// 在 watchers 和 computed getters 中訪問 `msg`
// 將其作為依賴項(xiàng)進(jìn)行跟蹤，就像訪問 `props.msg` 一樣
console.log(`msg is: ${msg}`)
})
</script>
<template>{{ msg }}</template>defineModel
以前，對于支持與 v-model 雙向綁定的組件，它需要（1）聲明一個 prop 和（2）在打算更新 prop 時發(fā)出相應(yīng)的 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> 中聲明組件選項(xiàng)，而不需要單獨(dú)的 <script> 塊：
<script setup>
defineOptions({ inheritAttrs: false })
</script>使用 toRef 和 toValue 實(shí)現(xiàn)更好的 getter 支持
toRef 已得到增強(qiáng)以支持將值/getters/現(xiàn)有 refs 規(guī)范化為 refs：
// 相當(dāng)于 ref(1)
toRef(1)
// 創(chuàng)建一個 readonly ref，在 .value 訪問時調(diào)用 getter
toRef(() => props.foo)
// 按原樣返回現(xiàn)有 refs
toRef(existingRef)使用 getter 調(diào)用 toRef 類似于 computed，但是當(dāng) getter 只執(zhí)行屬性訪問而沒有昂貴的計算時，可以更高效。
新的 toValue 工具方法提供相反的功能，即將值/ getter / ref 規(guī)范化為值：
toValue(1) // --> 1
toValue(ref(1)) // --> 1
toValue(() => 1) // --> 1toValue 可以在組合式函數(shù)中代替 unref，以便組合式函數(shù)可以接受 getter 作為響應(yīng)式數(shù)據(jù)源：
// 以前：分配不必要的中間引用
useFeature(computed(() => props.foo))
useFeature(toRef(props, 'foo'))
// 現(xiàn)在：更高效和簡潔
useFeature(() => props.foo)toRef 和 toValue 之間的關(guān)系類似于 ref 和 unref 之間的關(guān)系，主要區(qū)別在于 getter 函數(shù)的特殊處理。
JSX 導(dǎo)入源支持
當(dāng)前，Vue 的類型自動注冊全局 JSX 類型。這可能會與需要 JSX 類型推斷的其他庫一起使用時產(chǎn)生沖突，特別是 React。
從 3.3 開始，Vue 支持通過 TypeScript 的 jsxImportSource 選項(xiàng)指定 JSX 命名空間，這允許用戶基于其用例選擇全局或每個文件的選擇。
為了向后兼容，3.3 仍然全局注冊 JSX 命名空間。計劃在 3.4 中刪除默認(rèn)的全局注冊。如果正在使用 TSX 和 Vue，請在升級到 3.3 后在 tsconfig.json 中添加顯式的 jsxImportSource，以避免在 3.4 中出現(xiàn)問題。
維護(hù)基礎(chǔ)設(shè)施改進(jìn)
此版本建立在許多維護(hù)基礎(chǔ)設(shè)施改進(jìn)的基礎(chǔ)上，這使得 Vue 團(tuán)隊(duì)能夠更有信心地更快地行動：
- 通過將類型檢查與匯總構(gòu)建分開并從 rollup-plugin-typescript2 移動到 rollup-plugin-esbuild，構(gòu)建速度提高 10 倍。
- 通過從 Jest 轉(zhuǎn)移到 Vitest 來加快測試速度。
- 通過從 @microsoft/api-extractor 轉(zhuǎn)移到 rollup-plugin-dts 來更快地生成類型。
- 通過 ecosystem-ci 進(jìn)行綜合回歸測試，在發(fā)布前捕獲主要生態(tài)系統(tǒng)依賴項(xiàng)中的回歸。
按照計劃，Vue 團(tuán)隊(duì)的目標(biāo)是在 2023 年開始發(fā)布更小、更頻繁的功能版本，敬請期待！
參考：https://blog.vuejs.org/posts/vue-3-3。
