2024 Vue 聯邦大會，全明星陣容！探討 Vue 的未來和問題

2024-05-15碼農

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

Vue 聯邦大會（Vue Nation）

2024的 Vue 聯邦大會（Vue Nation）上，Vue 核心團隊成員現身，並進行現場問答，涉及到了很多 Vue 的高級功能、元件構建、常見的問題，以及一些啟發性的演講

可以看到，清一色的大佬啊~

Vue 核心團隊現場問答

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

Vue 開源貢獻方面

關於測試方法

Vue 的發展展望

Eduardo 是 Pinia & Vue Router 之父 ，由他開始進行現場問答

開源貢獻方面

Eduardo 開始他的開源旅程透過在 Meteor 和 Vue 之間進行整合

Guillaume 在開發 Vue 的選項式 API 上表現出色

關於測試方法

在單元測試方面

Eduardo 傾向於采用 Jest 和 Vue Test Utils，對於端到端測試則更喜歡使用 Jest 和 Cypress 或 Playwright

相對而言，Guillaume 也使用 Jest 和 Vue Test Utils 進行單元測試，但他更偏好使用 Nightwatch 來執行端到端測試

Vue 的發展展望

目前 Vue 不打算廢除選項式 API

Vue 開發團隊正在考慮增強 TypeScript 的支持

盡管目前沒有推出全新主要版本 Vue 4 的計劃，但團隊將在需要時實施重大更新

2024 Vuetify 的未來規劃

「Vuetify 之父」 John 介紹了 2024 年的三個計劃中的次版本。第一個版本 Nebula 將重點升級布局系統並引入新元件。第二個版本 Odyssey 將致力於更新表單功能。第三個版本 Andromeda 將重點提供新的套用功能，並為使用者提供導航指南

具體亮點如下：

Nebula（星雲，2024 年 4 月）

升級布局系統以利用 Vue 的 Suspense 功能

添加五個新元件

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

添加六個用於改善表單體驗的新元件

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

V 工具提示元件：提供更多資訊的工具提示

V 視訊元件：功能齊全的視訊播放器

Vuetify Studio：一款新產品，允許使用者透過簡單界面配置整個套用

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

Vue + TresJS 建立 3D 體驗

"Saburido，被譽為「TresJS 之父」，在一個講座中講述了如何結合使用 Vue 和他開發的 TresJS 來建立 3D 體驗。他分享了自己對 3D 圖形的熱情，並介紹了 TresJS 這一自訂渲染 API 的功能

透過 TresJS，開發者可以在 Vue 環境中使用元件和組合式函式來構建 3D 場景，從而輕松打造身臨其境的 3D 體驗，無需深入學習復雜的 3D 技術

在演示中，Saburido 展示了如何使用 TresJS 構建一個 3D 場景。他對 TresJS 在簡化建立網路 3D 體驗方面的巨大潛力感到非常興奮，並討論了一些亟需解決的問題，比如效能提升和提高相容性

下一代 UI 元件庫：PrimeVue

"Civici，被稱為「PrimeVue 之父」，對外介紹了其開發的 PrimeVue，這是一款開源並免費的新一代 Vue UI 元件庫。他強調了 PrimeVue 的幾個核心優勢：

PrimeVue 在樣式設計上提供了高度的自由度，與其他庫的固定樣式不同，開發者可以根據個人喜好自訂元件的外觀

PrimeVue 在易用性和可存取性方面表現出色，它遵守了 WCAG 2.2 標準，並采用了語意化的 HTML 結構

PrimeVue 包含了眾多高級功能，如數據表和行事曆等

對於那些需要高度可客製且易於存取的 Vue UI 元件庫的開發者來說，PrimeVue 提供了一個理想的選擇

Nuxt/Vue 套用遷移到 TS

「Push Brand 之父」Millan 分享了他把 Nuxt 套用遷移到 TypeScript (TS) 的過程和遇到的挑戰

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

Millan 詳細說明了將 Nuxt/Vue 套用遷移到 TypeScript 的關鍵步驟：

1、 設定 TypeScript 配置檔： 建立一個 tsconfig.json 檔，配置以確保它與 Nuxt 3 相容

2、 遷移服務和輔助函式： 這一步包括轉移獨立的服務和輔助函式檔，這些檔不會影響套用的其他部份。

3、 遷移 Nuxt 外掛程式和中介軟體： 在服務和輔助函式遷移完成後，接下來遷移關鍵的外掛程式和中介軟體。

4、 遷移元件： 這是遷移過程中最為復雜的部份，涉及到把元件邏輯轉換為 TypeScript，並用型別註解來定義 props 和狀態。

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

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

Vue 常見問題，如何避坑

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

他提到的第一個常見錯誤是在 v-for 迴圈中使用索引作為 key 內容。當陣列順序改變或巢狀元素有自己的狀態時，這可能導致問題。Daniel 建議使用元素的唯一 id 作為 key 來解決這個問題

他還指出，很多人誤以為 key 內容僅在 v-for 中使用。實際上，key 可以套用於任何需要唯一標識的場合。例如，他建議在 Vue 的 useInterval 函式使用的計數器中使用 key 來追蹤增量

Daniel 同樣強調，直接修改 prop 是另一個常見錯誤，這違反了 Vue 中 prop 的唯讀原則。他的建議是復制一個 prop 的副本進行修改，而不是直接修改 prop。最後，Daniel 還介紹了一些避免常見 Vue 錯誤的技巧，比如使用 ESLint 和 Vue devtools 等工具進行程式碼品質保證，以及使用條件渲染技術來提升套用效能