此版本專注于開發(fā)人員體驗改進-特別是SFC<script setup>與TypeScript的使用。與Vue語言工具[1]（以前稱為Volar）的1.6版本一起，我們在將Vue與TypeScript一起使用時解決了許多長期存在的痛點。這篇文章概述了3.3中突出顯示的功能。有關更改的完整列表，請參閱GitHub上的完整更改日志[2]。

 

　　依賴性更新升級到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）

 

　　\<腳本設置> + TypeScript DX改進[3]

 

　　宏中的導入和復雜類型支持[4]

　　通用組件[5]

　　更符合人體工程學的定義Emits[6]

　　帶有定義插槽的類型插槽[7]

　　實驗特征[8]

 

　　響應式 props 解構[9]

　　定義模型[10]

　　其他值得注意的功能[11]

 

　　定義選項[12]

　　使用toRef和toValue提供更好的Getter支持[13]

　　JSX導入源支持[14]

　　維護基礎設施改進[15]

 

　　1<script setup>+ TypeScript DX改進

　　宏中的導入和復雜類型支持

　　以前，defineProps和defineEmits的類型參數位置中使用的類型僅限于本地類型，并且僅支持類型文字和接口。這是因為Vue需要能夠分析 props 接口上的屬性，以便生成相應的運行時選項。這個限制現(xiàn)在在3.3中得到了解決。編譯器現(xiàn)在可以解析導入的類型，并支持一組有限的復雜類型：

 

　　vue

 

　　<script setup lang="ts">

　　import type { Props } from './foo'

 

　　// imported + intersection type

　　defineProps<Props & { extraProp?: string }>()

　　</script>

　　請注意，復雜類型的支持是基于AST的，因此不是100%全面的。一些需要實際類型分析的復雜類型，例如條件類型，不受支持。您可以為單個 prop 的類型使用條件類型，但不能使用整個 prop 對象。

 

　　詳情：PR#8083[16]

　　通用組件

　　使用<script setup>的組件現(xiàn)在可以通過generic屬性接受通用類型參數：

 

　　vue

 

　　<script setup lang="ts" generic="T">

　　defineProps<{

　　  items: T[]

　　  selected: T

　　}>()

　　</script>

　　generic的值與TypeScript中<...>之間的參數列表完全相同。例如，您可以使用多個參數、extends約束、默認類型和引用導入的類型：

 

　　vue

 

　　<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中默認啟用。

 

　　討論：RFC#436[17]

　　相關：通用`defineComponent()`\-PR#7963[18]

　　更符合人體工程學defineEmits

　　以前，defineEmits的類型參數僅支持調用簽名語法：

 

　　ts

 

　　// BEFORE

　　const emit = defineEmits<{

　　  (e: 'foo', id: number): void

　　  (e: 'bar', name: string, ...rest: any[]): void

　　}>()

　　The type matches the return type foremit, but is a bit verbose and awkward to write. 3.3 introduces a more ergonomic way of declaring emits with types:

 

　　ts

 

　　// AFTER

　　const emit = defineEmits<{

　　  foo: [id: number]

　　  bar: [name: string, ...rest: any[]]

　　}>()

　　在類型字面值中，鍵是事件名稱，值是指定附加參數的數組類型。雖然不是必需的，但您可以使用標記的元組元素[19]來顯式，如上例所示。仍然支持調用簽名語法。

 

　　鍵入的插槽defineSlots

　　新的defineSlots宏可用于聲明預期插槽及其各自的預期插槽prop：

 

　　vue

 

　　<script setup lang="ts">

　　defineSlots<{

　　  default?: (props: { msg: string }) => any

　　  item?: (props: { id: number }) => any

　　}>()

　　</script>

　　defineSlots()只接受類型參數，不接受運行時參數。類型參數應該是類型文字，其中屬性鍵是插槽名稱，值是插槽函數。該函數的第一個參數是插槽期望接收的prop，其類型將用于模板中的插槽 prop。defineSlots的返回值與useSlots返回的插槽對象相同。目前的一些限制：

 

　　所需的插槽檢查尚未在volar / vue-tsc中實現(xiàn)。

　　插槽函數返回類型目前被忽略，可以是any，但我們將來可能會利用它進行插槽內容檢查。

　　還有一個相應的slots選項用于defineComponent使用。這兩個API都沒有運行時影響，純粹作為IDE和vue-tsc的類型提示。

 

　　詳情：PR#7982[20]

　　2實驗特征

　　響應式 prop 解構

　　以前是現(xiàn)已放棄的響應性變換的一部分，響應式的解構已被拆分為一個單獨的功能。該功能允許非結構化的prop保留響應性，并提供了一種更符合人體工程學的方式來聲明 props 默認值：

 

　　vue

 

　　<script setup>

　　import { watchEffect } from 'vue'

 

　　const { msg = 'hello' } = defineProps(['msg'])

 

　　watchEffect(() => {

　　  // accessing `msg` in watchers and computed getters

　　  // tracks it as a dependency, just like accessing `props.msg`

　　  console.log(`msg is: ${msg}`)

　　})

　　</script>

 

　　<template>{{ msg }}</template>

　　此功能是實驗性的，需要明確選擇加入。

 

　　詳情：RFC#502[21]

　　defineModel

　　以前，為了使組件支持與v-model雙向綁定，它需要（1）聲明prop，（2）在打算更新prop時發(fā)出相應的update:propName事件：

 

　　vue

 

　　<!-- BEFORE -->

　　<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宏的使用。宏會自動注冊一個Props，并返回一個可以直接突變的引用：

 

　　vue

 

　　<!-- AFTER -->

　　<script setup>

　　const modelValue = defineModel()

　　console.log(modelValue.value)

　　</script>

 

　　<template>

　　  <input v-model="modelValue" />

　　</template>

　　此功能是實驗性的，需要明確選擇加入。

 

　　詳細信息：RFC#503[22]

　　3其他值得注意的功能

　　defineOptions

　　新的defineOptions宏允許直接在<script setup>聲明組件選項，而無需單獨的<script>塊：

 

　　vue

 

　　<script setup>

　　defineOptions({ inheritAttrs: false })

　　</script>

　　使用toRef和更好的Getter支持toValue

　　toRef已增強，以支持將值/獲取器/現(xiàn)有引用標準化為引用：

 

　　js

 

　　// equivalent to ref(1)

　　toRef(1)

　　// creates a readonly ref that calls the getter on .value access

　　toRef(() => props.foo)

　　// returns existing refs as-is

　　toRef(existingRef)

　　使用getter調用toRef類似于computed，但當getter只是在沒有昂貴計算的情況下執(zhí)行屬性訪問時，效率會更高。新的toValue實用程序方法提供了相反的，將值/獲取器/引用標準化為值：

 

　　toValue(1) //       --> 1

　　toValue(ref(1)) //  --> 1

　　toValue(() => 1) // --> 1

　　toValue可以在可組合物中代替unref，以便您的可組合物可以接受獲取者作為響應性數據源：

 

　　// before: allocating unnecessary intermediate refs

　　useFeature(computed(() => props.foo))

　　useFeature(toRef(props, 'foo'))

 

　　// after: more efficient and succinct

　　useFeature(() => props.foo)

　　toRef和toValue之間的關系與ref和unref之間的關系相似，主要區(qū)別是getter函數的特殊處理。

 

　　詳情：PR#7997[23]

　　JSX導入源支持

　　目前，Vue的類型會自動注冊全局JSX類型。這可能會導致與其他需要JSX類型推理的庫一起使用的沖突，特別是React。從3.3開始，Vue支持通過TypeScript的jsxImportSource[24]選項指定JSX命名空間。這允許用戶根據他們的用例選擇全局或每個文件選擇加入。為了向后兼容，3.3仍然在全球范圍內注冊JSX命名空間。我們計劃在3.4中刪除默認的全局注冊。如果您將TSX與Vue一起使用，您應該在升級到3.3后將顯式jsxImportSource添加到tsconfig.json，以避免在3.4中損壞。

 

　　4維護基礎設施改進

　　此版本基于許多維護基礎設施改進，使我們能夠更自信地更快地移動：

 

　　通過將類型檢查與 rollup 構建分開，并從rollup-plugin-typescript2移動到rollup-plugin-esbuild，構建速度快10倍。

　　通過從Jest 遷移到 Vitest[25] 來加快測試速度。

　　通過從@microsoft/api-extractor移動到rollup-plugin-dts更快地生成類型。

　　通過ecosystem-ci [26]進行綜合回歸測試-在發(fā)布前捕獲主要生態(tài)系統(tǒng)依賴項的回歸！