建站
咨詢
售后
建站咨詢
新聞中心
5 月 11 日，Vue 3.3 正式發(fā)布，代號 Rurouni Kenshin。本次更新主要針對開發(fā)者體驗(yàn)進(jìn)行了改進(jìn)，特別是在使用 TypeScript 時(shí)的 SFC
注意，復(fù)雜類型支持是基于AST的，因此不是 100% 全面的。不支持一些需要實(shí)際類型分析的復(fù)雜類型，例如條件類型?？梢詫蝹€ props 的類型使用條件類型，但不能對整個 props 對象使用條件類型。
通用組件
使用＜script setup＞的組件現(xiàn)在可以通過 generic 屬性接受泛型類型參數(shù)：
generic 的值與 TypeScript 中 <...> 之間的參數(shù)列表完全相同。例如，可以使用多個參數(shù)、extends約束、默認(rèn)類型和引用導(dǎo)入類型：
這個功能以前需要顯式地選擇，但現(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：
defineSlots() 只接受類型參數(shù)，不接受運(yùn)行時(shí)參數(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)行時(shí)影響，并且純粹用作 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)值的方式：
{{ msg }}defineModel
以前，對于支持與 v-model 雙向綁定的組件，它需要（1）聲明一個 prop 和（2）在打算更新 prop 時(shí)發(fā)出相應(yīng)的 update:propName 事件：
3.3 使用新的 defineModel 宏簡化了使用。宏會自動注冊一個 prop，并返回一個可以直接改變的 ref：
其他特性
defineOptions
新的 defineOptions 宏允許直接在
使用 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 訪問時(shí)調(diào)用 getter
toRef(() => props.foo)
// 按原樣返回現(xiàn)有 refs
toRef(existingRef)使用 getter 調(diào)用 toRef 類似于 computed，但是當(dāng) getter 只執(zhí)行屬性訪問而沒有昂貴的計(jì)算時(shí)，可以更高效。
新的 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 類型推斷的其他庫一起使用時(shí)產(chǎn)生沖突，特別是 React。
從 3.3 開始，Vue 支持通過 TypeScript 的 jsxImportSource 選項(xiàng)指定 JSX 命名空間，這允許用戶基于其用例選擇全局或每個文件的選擇。
為了向后兼容，3.3 仍然全局注冊 JSX 命名空間。計(jì)劃在 3.4 中刪除默認(rèn)的全局注冊。如果正在使用 TSX 和 Vue，請?jiān)谏壍?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)中的回歸。
按照計(jì)劃，Vue 團(tuán)隊(duì)的目標(biāo)是在 2023 年開始發(fā)布更小、更頻繁的功能版本，敬請期待！
參考：https://blog.vuejs.org/posts/vue-3-3。
網(wǎng)頁名稱：Vue3.3正式發(fā)布，代號：RurouniKenshin
轉(zhuǎn)載來源：http://m.fisionsoft.com.cn/article/djgpici.html
