Vue 3.3 正式發布，代號：Rurouni Kenshin
5 月 11 日，Vue 3.3 正式發布，代號 Rurouni Kenshin。本次更新主要針對開發者體驗進行了改進，特別是在使用 TypeScript 時的 SFC <script setup>。與 Vue 語言工具（以前稱為 Volar）1.6 的發布相結合，解決了在使用 TypeScript 時存在的許多長期困擾問題。下面就來看看 Vue 3.3 版本中的重點功能！
當升級到 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）
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) // --> 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。
