建站
咨詢
售后
建站咨詢
新聞中心
5 月 11 日，Vue 3.3 正式發(fā)布，代號 Rurouni Kenshin。本次更新主要針對開發(fā)者體驗進行了改進，特別是在使用 TypeScript 時的 SFC
注意，復雜類型支持是基于AST的，因此不是 100% 全面的。不支持一些需要實際類型分析的復雜類型，例如條件類型?？梢詫蝹€ props 的類型使用條件類型，但不能對整個 props 對象使用條件類型。
通用組件
使用＜script setup＞的組件現(xiàn)在可以通過 generic 屬性接受泛型類型參數：
generic 的值與 TypeScript 中 <...> 之間的參數列表完全相同。例如，可以使用多個參數、extends約束、默認類型和引用導入類型：
這個功能以前需要顯式地選擇，但現(xiàn)在在最新版本的 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：
defineSlots() 只接受類型參數，不接受運行時參數。類型參數應該是類型字面量，其中屬性鍵是插槽名稱，值是插槽函數。該函數的第一個參數是插槽期望接收的 props，其類型將用于模板中的插槽 props。defineSlots 的返回值與 useSlots 返回的插槽對象相同。
當前的一些限制：
- volar / vue-tsc 中尚未實現(xiàn)必需的插槽檢查。
- 插槽函數返回類型目前被忽略，可以是 any 類型，但將來可能會利用它來檢查插槽內容。
defineComponent 用法也有對應的 slots 選項。這兩個 API 都沒有運行時影響，并且純粹用作 IDE 和 vue-tsc 的類型提示。
實驗功能
響應式 Props 解構
以前是現(xiàn)在已刪除的 Reactivity Transform 的一部分，響應式 props 解構已拆分為單獨的功能。
該功能允許解構的 props 保持響應性，并提供更符合人體工程學的聲明 props 默認值的方式：
{{ msg }}defineModel
以前，對于支持與 v-model 雙向綁定的組件，它需要（1）聲明一個 prop 和（2）在打算更新 prop 時發(fā)出相應的 update:propName 事件：
3.3 使用新的 defineModel 宏簡化了使用。宏會自動注冊一個 prop，并返回一個可以直接改變的 ref：
其他特性
defineOptions
新的 defineOptions 宏允許直接在
使用 toRef 和 toValue 實現(xiàn)更好的 getter 支持
toRef 已得到增強以支持將值/getters/現(xiàn)有 refs 規(guī)范化為 refs：
// 相當于 ref(1)
toRef(1)
// 創(chuàng)建一個 readonly ref，在 .value 訪問時調用 getter
toRef(() => props.foo)
// 按原樣返回現(xiàn)有 refs
toRef(existingRef)使用 getter 調用 toRef 類似于 computed，但是當 getter 只執(zhí)行屬性訪問而沒有昂貴的計算時，可以更高效。
新的 toValue 工具方法提供相反的功能，即將值/ getter / ref 規(guī)范化為值：
toValue(1) // --> 1
toValue(ref(1)) // --> 1
toValue(() => 1) // --> 1toValue 可以在組合式函數中代替 unref，以便組合式函數可以接受 getter 作為響應式數據源：
// 以前：分配不必要的中間引用
useFeature(computed(() => props.foo))
useFeature(toRef(props, 'foo'))
// 現(xiàn)在：更高效和簡潔
useFeature(() => props.foo)toRef 和 toValue 之間的關系類似于 ref 和 unref 之間的關系，主要區(qū)別在于 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 中出現(xiàn)問題。
維護基礎設施改進
此版本建立在許多維護基礎設施改進的基礎上，這使得 Vue 團隊能夠更有信心地更快地行動：
- 通過將類型檢查與匯總構建分開并從 rollup-plugin-typescript2 移動到 rollup-plugin-esbuild，構建速度提高 10 倍。
- 通過從 Jest 轉移到 Vitest 來加快測試速度。
- 通過從 @microsoft/api-extractor 轉移到 rollup-plugin-dts 來更快地生成類型。
- 通過 ecosystem-ci 進行綜合回歸測試，在發(fā)布前捕獲主要生態(tài)系統(tǒng)依賴項中的回歸。
按照計劃，Vue 團隊的目標是在 2023 年開始發(fā)布更小、更頻繁的功能版本，敬請期待！
參考：https://blog.vuejs.org/posts/vue-3-3。
網站欄目：Vue3.3正式發(fā)布，代號：RurouniKenshin
網址分享：http://www.5511xx.com/article/djgpici.html
