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

 

　　依賴(lài)性更新升級到3.3時(shí)，建議也更新以下依賴(lài)項：

 

　　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改進(jìn)[3]

 

　　宏中的導入和復雜類(lèi)型支持[4]

　　通用組件[5]

　　更符合人體工程學(xué)的定義Emits[6]

　　帶有定義插槽的類(lèi)型插槽[7]

　　實(shí)驗特征[8]

 

　　響應式 props 解構[9]

　　定義模型[10]

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

 

　　定義選項[12]

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

　　JSX導入源支持[14]

　　維護基礎設施改進(jìn)[15]

 

　　1<script setup>+ TypeScript DX改進(jìn)

　　宏中的導入和復雜類(lèi)型支持

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

 

　　vue

 

　　<script setup lang="ts">

　　import type { Props } from './foo'

 

　　// imported + intersection type

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

　　</script>

　　請注意，復雜類(lèi)型的支持是基于A(yíng)ST的，因此不是100%全面的。一些需要實(shí)際類(lèi)型分析的復雜類(lèi)型，例如條件類(lèi)型，不受支持。您可以為單個(gè) prop 的類(lèi)型使用條件類(lèi)型，但不能使用整個(gè) prop 對象。

 

　　詳情：PR#8083[16]

　　通用組件

　　使用<script setup>的組件現在可以通過(guò)generic屬性接受通用類(lèi)型參數：

 

　　vue

 

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

　　defineProps<{

　　  items: T[]

　　  selected: T

　　}>()

　　</script>

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

 

　　vue

 

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

 

　　討論：RFC#436[17]

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

　　更符合人體工程學(xué)defineEmits

　　以前，defineEmits的類(lèi)型參數僅支持調用簽名語(yǔ)法：

 

　　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[]]

　　}>()

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

 

　　鍵入的插槽defineSlots

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

 

　　vue

 

　　<script setup lang="ts">

　　defineSlots<{

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

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

　　}>()

　　</script>

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

 

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

　　插槽函數返回類(lèi)型目前被忽略，可以是any，但我們將來(lái)可能會(huì )利用它進(jìn)行插槽內容檢查。

　　還有一個(gè)相應的slots選項用于defineComponent使用。這兩個(gè)API都沒(méi)有運行時(shí)影響，純粹作為IDE和vue-tsc的類(lèi)型提示。

 

　　詳情：PR#7982[20]

　　2實(shí)驗特征

　　響應式 prop 解構

　　以前是現已放棄的響應性變換的一部分，響應式的解構已被拆分為一個(gè)單獨的功能。該功能允許非結構化的prop保留響應性，并提供了一種更符合人體工程學(xué)的方式來(lái)聲明 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>

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

 

　　詳情：RFC#502[21]

　　defineModel

　　以前，為了使組件支持與v-model雙向綁定，它需要（1）聲明prop，（2）在打算更新prop時(shí)發(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簡(jiǎn)化了使用新的defineModel宏的使用。宏會(huì )自動(dòng)注冊一個(gè)Props，并返回一個(gè)可以直接突變的引用：

 

　　vue

 

　　<!-- AFTER -->

　　<script setup>

　　const modelValue = defineModel()

　　console.log(modelValue.value)

　　</script>

 

　　<template>

　　  <input v-model="modelValue" />

　　</template>

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

 

　　詳細信息：RFC#503[22]

　　3其他值得注意的功能

　　defineOptions

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

 

　　vue

 

　　<script setup>

　　defineOptions({ inheritAttrs: false })

　　</script>

　　使用toRef和更好的Getter支持toValue

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

 

　　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類(lèi)似于computed，但當getter只是在沒(méi)有昂貴計算的情況下執行屬性訪(fǎng)問(wèn)時(shí)，效率會(huì )更高。新的toValue實(shí)用程序方法提供了相反的，將值/獲取器/引用標準化為值：

 

　　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之間的關(guān)系與ref和unref之間的關(guān)系相似，主要區別是getter函數的特殊處理。

 

　　詳情：PR#7997[23]

　　JSX導入源支持

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

 

　　4維護基礎設施改進(jìn)

　　此版本基于許多維護基礎設施改進(jìn)，使我們能夠更自信地更快地移動(dòng)：

 

　　通過(guò)將類(lèi)型檢查與 rollup 構建分開(kāi)，并從rollup-plugin-typescript2移動(dòng)到rollup-plugin-esbuild，構建速度快10倍。

　　通過(guò)從Jest 遷移到 Vitest[25] 來(lái)加快測試速度。

　　通過(guò)從@microsoft/api-extractor移動(dòng)到rollup-plugin-dts更快地生成類(lèi)型。

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