VueConf China 2021《Vue3生態進展-尤雨溪》Reaction

「來源: ｜Vue中文社群 ID：vue_fe」

文章儘可能的以圖文形式還原尤大的直播內容(為了你有更好的觀看體驗，歐巴添加了一些相關連結)。還沒觀看的同學可以和大家一起來一波圖文 Reaction，看過的同學也可以再梳理一遍重點內容，廢話少說，讓我們開始吧！

文末閱讀原文可檢視 VueConf China 2021 錄播

一些資料

上面的資料是截止到今年 4 月份的，與去年同期相比，增長很可觀，整個的前端開發市場還在不斷擴大。

2020.09.18 釋出 Vue 3.0 One Piece

Vue 3.0[1]Vue3 釋出後官方並沒有強推所有的使用者都升級 Vue3，因為生態需要時間，生態裡的工具、周邊以及庫都需要時間去相容，Vue3 的一些新用法也需要時間去沉澱。

釋出後主要在忙什麼？

Vue Router 4.0 已穩定

github.com/posva[2]Vuex 4.0 已穩定

github.com/kiaking[3](這位新加入的老哥，講道理，豹紋有點帥。)

Vue Router 和 Vuex 早已經是 Vue 框架的一部分，它們的穩定是非常重要的。

Vue 3 生態逐步趕上

社群生態庫也在逐步趕上。

Quasar[4]Element Plus[5]And Design Vue[6]Vuetify[7]Nuxt 3[8]開發體驗改進

構建工具 Vite

Vite 官方中文文件[9]「該知道的都知道了，不知道的慢慢了解。-- 姜雲升」

vue-cli 和 Vite 的主要區別在於：vue-cli 基於 webpack 二次開發，vue-cli 涵蓋的範疇比較廣，維護成本非常高。一些常見的配置變得複雜化了。

Vite 會繼承 vue-cli 的優點，選擇更簡潔的路線，插件機制基於 Rollup 的 API，非常簡潔直觀。比起 Webpack，Rollup 的插件會好寫很多，更加容易理解。

Vite 插件還可以支援定製開發伺服器、middleware 以及對熱更新的行為做細緻的調整。

Vite or vue-cli ？

現有項目如果與 Webpack 強依賴，可能也沒有辦法簡單的遷移過來。

VitePress 基於 Vue3 + Vite 的靜態站生成器

可以理解為把 Vue2 換成了 Vue3，把 Webpack 換成了 Vite，就得到了 VitePress。

上面的第三點，React 的 MDX 也有同樣的問題，不過 VitePress 把它解決了。

更多單檔案元件編譯階段的優化

New script setup (without ref sugar) [10]只要你的 script 標籤帶了 setup 屬性，那麼你聲明的變數就可以直接在模板裡使用。

而且，setup 可以幫助我們簡潔很多程式碼，提升編碼體驗。

比如我們有 Comp.vue 和 App.vue 兩個元件。

在 setup 下，App 引入 Comp 元件後可以直接使用，無需註冊。

對比一下：

<style> 動態變數注入

SFC style CSS variable injection (new edition)[11]

點選 make it green 按鈕後：

原理也很簡單，使用原生 CSS 變數，將動態內容進行繫結，剩下就全部交給瀏覽器去做，所以運行時開銷非常小。是個價效比很高的特性。

Vue Devtools beta channel(6.0)

不用在 Vue Devtools 兩個版本之間來回切換了，新的 Vue Devtools 同時支援 Vue2/3。

這張圖是開發時的截圖，有些模糊，不過沒關係。大致我們可以從圖中看出：

效能偵錯面板可以幫我們找出哪個元件渲染特別慢，還有滑鼠事件、鍵盤事件、元件事件、元件重渲染等。

最關鍵的是這個 Timeline 支援第三方插件對其進行擴展。

更好的 IDE/TS 支援

Volar[12] 是未來官方主推的 VS Code 插件，將會替代 Vetur(歷史包袱)。

如上圖，Volar 提供了幾乎和 TSX 一樣的開發體驗，可以進行模板類型檢查。

IDE 支援計劃

未來會將 Vetur 的一些重要的功能以及一些新的探索整合到 Volar 上。

同時 Volar 的作者還開發了 vue-tsc，在 CI 上支援可以同時檢查 TS 檔案以及 Vue 檔案裡的 TS 類型錯誤，內部的實現適合 Volar 一樣的。

當然，也會和其他的編輯器進行官方合作，提供支援。

不再支援 IE11

微軟剛剛釋出聲明，IE11 將在 2022 年 6 月 retire，可見其推動 IE 使用者改用 Edge 的決心。

Proposal for dropping ie11 support in Vue 3[13]Drop IE11 support plan for Vue 3[14]Vue3 + Vite = Modern by Default

Vue3 migration build

近期另一個重大發布，整體的內容比較大，預計在 3.1 釋出。

Vue3 升級版：底子裡是 Vue3，上層相容 Vue2 的行為。大部分的功能都可以完全支援。

可以選擇將整個應用可以跑在 Vue2 模式下，再將某幾個單獨的元件跑在 Vue3 模式下。

也可以反過來，整個應用跑在 Vue3 模式下，再將幾個舊的 Vue2 元件移植過來，再慢慢的更改成 Vue3 的模式。

儘可能的給大家提供了相容的靈活性。

目前文件在vue-compat[15]倉庫裡。public API 會盡可能的相容，但是一些私有 API 確實沒有辦法完全相容。文件中有詳細的支援列表。

並提供了詳盡的 step by step 的流程vue-hackernews-2.0[16]

3.2

因為上面的相容版移到了 3.1，所以原有的 3.1 內容將會移到 3.2，不過預計也會很快釋出，具體的細節會在釋出時披露。

絕對需要 IE11 支援的話 請等待 2.7

預計在 Q3 2021 去做。

希望在 Q3 Vue2.7 釋出之後，整個的 Vue2 到 Vue3 的升級過程會變得更加順滑。可以先基於 Vite 切換到 Vue2.7，Compsition API 會直接內建，再切換到 Vue3 會更加簡單。

Vue3 成為預設版本 by end of Q2 2021

將會在 2021 年 6 月底，將 npm 預設安裝指向 Vue3，文件也會預設指向 Vue3 的文件，希望新的使用者會以 Vue3 作為基準。

「本文已收錄在前端食堂同名倉庫 Github github.com/Geekhyt[17]，歡迎光臨食堂，如果覺得酒菜還算可口，賞個 Star 對食堂老闆來說是莫大的鼓勵。」

參考資料

[1]Vue 3.0: https://github.com/vuejs/vue-next/releases/tag/v3.0.0

[2]github.com/posva: https://github.com/posva

[3]github.com/kiaking: https://github.com/kiaking

[4]Quasar: https://github.com/quasarframework/quasar

[5]Element Plus: https://github.com/element-plus/element-plus

[6]And Design Vue: https://github.com/vueComponent/ant-design-vue

[7]Vuetify: https://github.com/vuetifyjs/vuetify

[8]Nuxt 3: https://github.com/nuxt/nuxt.js

[9]Vite 官方中文文件: https://cn.vitejs.dev/

[10]New script setup (without ref sugar) : https://github.com/vuejs/rfcs/pull/227

[11]SFC style CSS variable injection (new edition): https://github.com/vuejs/rfcs/pull/231

[12]Volar: https://github.com/johnsoncodehk/volar

[13]Proposal for dropping ie11 support in Vue 3: https://github.com/vuejs/rfcs/discussions/296#discussioncomment-707086

[14]Drop IE11 support plan for Vue 3: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md

[15]vue-compat: https://github.com/vuejs/vue-next/tree/master/packages/vue-compat

[16]vue-hackernews-2.0: https://github.com/vuejs/vue-hackernews-2.0/compare/migration

[17]github.com/Geekhyt: https://github.com/Geekhyt/front-end-canteen