Vue 聯(lián)邦大會（Vue Nation）

2024的 Vue 聯(lián)邦大會（Vue Nation）上，Vue 核心團隊成員現(xiàn)身，并進行現(xiàn)場問答，涉及到了很多 Vue 的高級功能、組件構(gòu)建、常見的問題，以及一些啟發(fā)性的演講。

可以看到，清一色的大佬??！

圖片

Vue 核心團隊現(xiàn)場問答

Vue 核心團隊成員主要是回答了：

• Vue 開源貢獻方面
• 關(guān)于測試方法
• Vue 的發(fā)展展望

圖片

Eduardo 是 Pinia & Vue Router 之父，由他開始進行現(xiàn)場問答。

開源貢獻方面

• Eduardo 開始他的開源旅程通過在 Meteor 和 Vue 之間進行集成
• Guillaume 在開發(fā) Vue 的選項式 API 上表現(xiàn)出色

關(guān)于測試方法

在單元測試方面

• Eduardo 傾向于采用 Jest 和 Vue Test Utils，對于端到端測試則更喜歡使用 Jest 和 Cypress 或 Playwright
• 相對而言，Guillaume 也使用 Jest 和 Vue Test Utils 進行單元測試，但他更偏好使用 Nightwatch 來執(zhí)行端到端測試

Vue 的發(fā)展展望

• 目前 Vue 不打算廢除選項式 API
• Vue 開發(fā)團隊正在考慮增強 TypeScript 的支持
• 盡管目前沒有推出全新主要版本 Vue 4 的計劃，但團隊將在需要時實施重大更新

2024 Vuetify 的未來規(guī)劃

“Vuetify 之父” John 介紹了 2024 年的三個計劃中的次版本。第一個版本 Nebula 將重點升級布局系統(tǒng)并引入新組件。第二個版本 Odyssey 將致力于更新表單功能。第三個版本 Andromeda 將重點提供新的應用功能，并為用戶提供導航指南。

圖片

具體亮點如下：

Nebula（星云，2024 年 4 月）

• 升級布局系統(tǒng)以利用 Vue 的 Suspense 功能
• 添加五個新組件

Odyssey（奧德賽，2024 年第二季度）

• 添加六個用于改善表單體驗的新組件

Andromeda（仙女座，2024 年第四季度）

• V 工具提示組件：提供更多信息的工具提示
• V 視頻組件：功能齊全的視頻播放器
• Vuetify Studio：一款新產(chǎn)品，允許用戶通過簡單界面配置整個應用

此外，John 還透露 Vuetify 團隊正在研究提高可訪問性和增加對 Vue 最新版本的采用率。

Vue + TresJS 創(chuàng)建 3D 體驗

圖片

"Saburido，被譽為“TresJS 之父”，在一個講座中講述了如何結(jié)合使用 Vue 和他開發(fā)的 TresJS 來創(chuàng)建 3D 體驗。他分享了自己對 3D 圖形的熱情，并介紹了 TresJS 這一自定義渲染 API 的功能。

通過 TresJS，開發(fā)者可以在 Vue 環(huán)境中使用組件和組合式函數(shù)來構(gòu)建 3D 場景，從而輕松打造身臨其境的 3D 體驗，無需深入學習復雜的 3D 技術(shù)。

在演示中，Saburido 展示了如何使用 TresJS 構(gòu)建一個 3D 場景。他對 TresJS 在簡化創(chuàng)建網(wǎng)絡 3D 體驗方面的巨大潛力感到非常興奮，并討論了一些亟需解決的問題，比如性能提升和提高兼容性。

下一代 UI 組件庫：PrimeVue

圖片

"Civici，被稱為“PrimeVue 之父”，對外介紹了其開發(fā)的 PrimeVue，這是一款開源并免費的新一代 Vue UI 組件庫。他強調(diào)了 PrimeVue 的幾個核心優(yōu)勢：

• PrimeVue 在樣式設(shè)計上提供了高度的自由度，與其他庫的固定樣式不同，開發(fā)者可以根據(jù)個人喜好自定義組件的外觀
• PrimeVue 在易用性和可訪問性方面表現(xiàn)出色，它遵守了 WCAG 2.2 標準，并采用了語義化的 HTML 結(jié)構(gòu)
• PrimeVue 包含了眾多高級功能，如數(shù)據(jù)表和日歷等

對于那些需要高度可定制且易于訪問的 Vue UI 組件庫的開發(fā)者來說，PrimeVue 提供了一個理想的選擇

Nuxt/Vue 應用遷移到 TS

圖片

“Push Brand 之父”Millan 分享了他把 Nuxt 應用遷移到 TypeScript (TS) 的過程和遇到的挑戰(zhàn)。

他提到，遷移過程中遇到的一個主要難題是缺乏全面的資源。雖然 Nuxt 的官方遷移指南提供了一些幫助，但對于 TypeScript 的遷移細節(jié)描述不夠，這讓他不得不頻繁查詢百度和 GitHub 的問題帖子尋找答案。

Millan 詳細說明了將 Nuxt/Vue 應用遷移到 TypeScript 的關(guān)鍵步驟：

1、設(shè)置 TypeScript 配置文件： 創(chuàng)建一個 tsconfig.json 文件，配置以確保它與 Nuxt 3 兼容

2、遷移服務和輔助函數(shù)： 這一步包括轉(zhuǎn)移獨立的服務和輔助函數(shù)文件，這些文件不會影響應用的其他部分。

3、遷移 Nuxt 插件和中間件： 在服務和輔助函數(shù)遷移完成后，接下來遷移關(guān)鍵的插件和中間件。

4、遷移組件： 這是遷移過程中最為復雜的部分，涉及到把組件邏輯轉(zhuǎn)換為 TypeScript，并用類型注解來定義 props 和狀態(tài)。

5、遷移 store： 這一步驟的方法取決于是否使用 Vuex 或 Pinia。對于 Vuex，需要將 store 分類并在應用中手動初始化；而 Pinia 則可以更直接地遷移到 TypeScript。

Millan 建議開發(fā)者采取逐步遷移的策略，避免一次性遷移過多導致負擔過重

Vue 常見問題，如何避坑

圖片

Vue School 的首席講師 Daniel 分享了使用 Vue 時經(jīng)常遇到的問題以及避開這些問題的技巧。

他提到的第一個常見錯誤是在 v-for 循環(huán)中使用索引作為 key 屬性。當數(shù)組順序改變或嵌套元素有自己的狀態(tài)時，這可能導致問題。Daniel 建議使用元素的唯一 id 作為 key 來解決這個問題。

他還指出，很多人誤以為 key 屬性僅在 v-for 中使用。實際上，key 可以應用于任何需要唯一標識的場合。例如，他建議在 Vue 的 useInterval 函數(shù)使用的計數(shù)器中使用 key 來追蹤增量。

Daniel 同樣強調(diào)，直接修改 prop 是另一個常見錯誤，這違反了 Vue 中 prop 的只讀原則。他的建議是復制一個 prop 的副本進行修改，而不是直接修改 prop。最后，Daniel 還介紹了一些避免常見 Vue 錯誤的技巧，比如使用 ESLint 和 Vue devtools 等工具進行代碼質(zhì)量保證，以及使用條件渲染技術(shù)來提升應用性能。

參考

• https://vuejsnation.com/
• https://vueschool.io/articles/news/vue-js-nation-2024-day-1-recap
• https://vueschool.io/articles/news/vue-nation-2024-day-2-recap