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

美味值：🌟🌟🌟🌟🌟

口味：鐵鍋燉排骨

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

一些數據

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

2020.09.18 發佈 Vue 3.0 One Piece

• Vue 3.0

Vue3 發佈後官方並無強推全部的用戶都升級 Vue3，由於生態須要時間，生態裏的工具、周邊以及庫都須要時間去兼容，Vue3 的一些新用法也須要時間去沉澱。

發佈後主要在忙什麼？

Vue Router 4.0 已穩定

• github.com/posva

Vuex 4.0 已穩定

• github.com/kiaking

(這位新加入的老哥，講道理，豹紋有點帥。)

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

Vue 3 生態逐步遇上

社區生態庫也在逐步遇上。

• Quasar
• Element Plus
• And Design Vue
• Vuetify
• Nuxt 3

開發體驗改進

構建工具 Vite

• Vite 官方中文文檔

該知道的都知道了，不知道的慢慢了解。 -- 姜雲升

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)

只要你的 script 標籤帶了 setup 屬性，那麼你聲明的變量就能夠直接在模板裏使用。

並且，setup 能夠幫助咱們簡潔不少代碼，提高編碼體驗。

好比咱們有 Comp.vue 和 App.vue 兩個組件。

在 setup 下，App 引入 Comp 組件後能夠直接使用，無需註冊。

對比一下：

<style> 動態變量注入

• SFC style CSS variable injection (new edition)

點擊 make it green 按鈕後：

原理也很簡單，使用原生 CSS 變量，將動態內容進行綁定，剩下就所有交給瀏覽器去作，因此運行時開銷很是小。是個性價比很高的特性。

Vue Devtools beta channel(6.0)

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

這張圖是開發時的截圖，有些模糊，不過不要緊。大體咱們能夠從圖中看出：

性能調試面板能夠幫咱們找出哪一個組件渲染特別慢，還有鼠標事件、鍵盤事件、組件事件、組件重渲染等。

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

更好的 IDE/TS 支持

Volar 是將來官方主推的 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
• Drop IE11 support plan for Vue 3

Vue3 + Vite = Modern by Default

Vue3 migration build

近期另外一個重大發布，總體的內容比較大，預計在 3.1 發佈。

Vue3 升級版：底子裏是 Vue3，上層兼容 Vue2 的行爲。大部分的功能均可以徹底支持。

能夠選擇將整個應用能夠跑在 Vue2 模式下，再將某幾個單獨的組件跑在 Vue3 模式下。

也能夠反過來，整個應用跑在 Vue3 模式下，再將幾個舊的 Vue2 組件移植過來，再慢慢的更改爲 Vue3 的模式。

儘量的給你們提供了兼容的靈活性。

目前文檔在vue-compat倉庫裏。public API 會盡量的兼容，可是一些私有 API 確實沒有辦法徹底兼容。文檔中有詳細的支持列表。

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

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，歡迎光臨食堂，若是以爲酒菜還算可口，賞個 Star 對食堂老闆來講是莫大的鼓勵。

❤️愛心三連擊

1.若是你以爲食堂酒菜還合胃口，就點個贊支持下吧，你的贊是我最大的動力。

2.關注公衆號前端食堂，吃好每一頓飯！

3.點贊、評論、轉發 === 催更！