VueConf China 2021 《Vue3生态进展-尤雨溪》 Reaction
大家好，我是若川。今天分享昨天Vueconf的一篇文章，來了解下Vue的生態(tài)進(jìn)展。
另外今晚7點(diǎn)，Vuebeijing社區(qū)邀請了尤大會在視頻號直播，可以加我微信 ruochuan12，告訴觀看地址提前預(yù)約。
點(diǎn)擊下方卡片關(guān)注我、加個星標(biāo)，或者查看源碼等系列文章。學(xué)習(xí)源碼整體架構(gòu)系列、年度總結(jié)、JS基礎(chǔ)系列
“
文章盡可能的以圖文形式還原尤大的直播內(nèi)容(為了你有更好的觀看體驗(yàn)，歐巴添加了一些相關(guān)鏈接)。還沒觀看的同學(xué)可以和大家一起來一波圖文 Reaction，看過的同學(xué)也可以再梳理一遍重點(diǎn)內(nèi)容，廢話少說，讓我們開始吧！
”一些數(shù)據(jù)
上面的數(shù)據(jù)是截止到今年 4 月份的，與去年同期相比，增長很可觀，整個的前端開發(fā)市場還在不斷擴(kuò)大。
2020.09.18 發(fā)布 Vue 3.0 One Piece
Vue 3.0[1]
Vue3 發(fā)布后官方并沒有強(qiáng)推所有的用戶都升級 Vue3，因?yàn)樯鷳B(tài)需要時間，生態(tài)里的工具、周邊以及庫都需要時間去兼容，Vue3 的一些新用法也需要時間去沉淀。
發(fā)布后主要在忙什么？
Vue Router 4.0 已穩(wěn)定
github.com/posva[2]
Vuex 4.0 已穩(wěn)定
github.com/kiaking[3]
(這位新加入的老哥，講道理，豹紋有點(diǎn)帥。)
Vue Router 和 Vuex 早已經(jīng)是 Vue 框架的一部分，它們的穩(wěn)定是非常重要的。
Vue 3 生態(tài)逐步趕上
社區(qū)生態(tài)庫也在逐步趕上。
Quasar[4]
Element Plus[5]
And Design Vue[6]
Vuetify[7]
Nuxt 3[8]
開發(fā)體驗(yàn)改進(jìn)
構(gòu)建工具 Vite
Vite 官方中文文檔[9]
該知道的都知道了，不知道的慢慢了解。-- 姜云升
”vue-cli 和 Vite 的主要區(qū)別在于：vue-cli 基于 webpack 二次開發(fā)，vue-cli 涵蓋的范疇比較廣，維護(hù)成本非常高。一些常見的配置變得復(fù)雜化了。
Vite 會繼承 vue-cli 的優(yōu)點(diǎn)，選擇更簡潔的路線，插件機(jī)制基于 Rollup 的 API，非常簡潔直觀。比起 Webpack，Rollup 的插件會好寫很多，更加容易理解。
Vite 插件還可以支持定制開發(fā)服務(wù)器、middleware 以及對熱更新的行為做細(xì)致的調(diào)整。
Vite or vue-cli ？
現(xiàn)有項(xiàng)目如果與 Webpack 強(qiáng)依賴，可能也沒有辦法簡單的遷移過來。
VitePress 基于 Vue3 + Vite 的靜態(tài)站生成器
可以理解為把 Vue2 換成了 Vue3，把 Webpack 換成了 Vite，就得到了 VitePress。
上面的第三點(diǎn)，React 的 MDX 也有同樣的問題，不過 VitePress 把它解決了。
更多單文件組件編譯階段的優(yōu)化
New script setup (without ref sugar) [10]
只要你的 script 標(biāo)簽帶了 setup 屬性，那么你聲明的變量就可以直接在模板里使用。
而且，setup 可以幫助我們簡潔很多代碼，提升編碼體驗(yàn)。
比如我們有 Comp.vue 和 App.vue 兩個組件。
在 setup 下，App 引入 Comp 組件后可以直接使用，無需注冊。
對比一下：
<style> 動態(tài)變量注入
SFC style CSS variable injection (new edition)[11]
點(diǎn)擊 make it green 按鈕后：
原理也很簡單，使用原生 CSS 變量，將動態(tài)內(nèi)容進(jìn)行綁定，剩下就全部交給瀏覽器去做，所以運(yùn)行時開銷非常小。是個性價比很高的特性。
Vue Devtools beta channel(6.0)
不用在 Vue Devtools 兩個版本之間來回切換了，新的 Vue Devtools 同時支持 Vue2/3。
這張圖是開發(fā)時的截圖，有些模糊，不過沒關(guān)系。大致我們可以從圖中看出：
性能調(diào)試面板可以幫我們找出哪個組件渲染特別慢，還有鼠標(biāo)事件、鍵盤事件、組件事件、組件重渲染等。
最關(guān)鍵的是這個 Timeline 支持第三方插件對其進(jìn)行擴(kuò)展。
更好的 IDE/TS 支持
Volar[12] 是未來官方主推的 VS Code 插件，將會替代 Vetur(歷史包袱)。
如上圖，Volar 提供了幾乎和 TSX 一樣的開發(fā)體驗(yàn)，可以進(jìn)行模板類型檢查。
IDE 支持計(jì)劃
未來會將 Vetur 的一些重要的功能以及一些新的探索整合到 Volar 上。
同時 Volar 的作者還開發(fā)了 vue-tsc，在 CI 上支持可以同時檢查 TS 文件以及 Vue 文件里的 TS 類型錯誤，內(nèi)部的實(shí)現(xiàn)適合 Volar 一樣的。
當(dāng)然，也會和其他的編輯器進(jìn)行官方合作，提供支持。
不再支持 IE11
微軟剛剛發(fā)布聲明，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
近期另一個重大發(fā)布，整體的內(nèi)容比較大，預(yù)計(jì)在 3.1 發(fā)布。
Vue3 升級版：底子里是 Vue3，上層兼容 Vue2 的行為。大部分的功能都可以完全支持。
可以選擇將整個應(yīng)用可以跑在 Vue2 模式下，再將某幾個單獨(dú)的組件跑在 Vue3 模式下。
也可以反過來，整個應(yīng)用跑在 Vue3 模式下，再將幾個舊的 Vue2 組件移植過來，再慢慢的更改成 Vue3 的模式。
盡可能的給大家提供了兼容的靈活性。
目前文檔在vue-compat[15]倉庫里。public API 會盡可能的兼容，但是一些私有 API 確實(shí)沒有辦法完全兼容。文檔中有詳細(xì)的支持列表。
并提供了詳盡的 step by step 的流程vue-hackernews-2.0[16]
3.2
因?yàn)樯厦娴募嫒莅嬉频搅?3.1，所以原有的 3.1 內(nèi)容將會移到 3.2，不過預(yù)計(jì)也會很快發(fā)布，具體的細(xì)節(jié)會在發(fā)布時披露。
絕對需要 IE11 支持的話 請等待 2.7
預(yù)計(jì)在 Q3 2021 去做。
希望在 Q3 Vue2.7 發(fā)布之后，整個的 Vue2 到 Vue3 的升級過程會變得更加順滑。可以先基于 Vite 切換到 Vue2.7，Compsition API 會直接內(nèi)置，再切換到 Vue3 會更加簡單。
Vue3 成為默認(rèn)版本 by end of Q2 2021
將會在 2021 年 6 月底，將 npm 默認(rèn)安裝指向 Vue3，文檔也會默認(rèn)指向 Vue3 的文檔，希望新的用戶會以 Vue3 作為基準(zhǔn)。
外鏈無法點(diǎn)開，可以點(diǎn)擊閱讀文章查看最近組建了一個江西人的前端交流群，如果你也是江西人可以加我微信 ruochuan12 拉你進(jìn)群。
·················?若川出品?·················
今日話題
上次尤大在視頻號直播有很多人表示錯過了，這次我也幫Vuebeijing社區(qū)宣傳下，避免小伙伴想看直播的錯過。尤大今晚7點(diǎn)在#視頻號：Vuebeijing 直播，也可以加我微信 ruochuan12，加群交流學(xué)習(xí)。歡迎在下方留言~? 歡迎分享、收藏、點(diǎn)贊、在看我的公眾號文章~
一個愿景是幫助5年內(nèi)前端人走向前列的公眾號
可加我個人微信?ruochuan12，長期交流學(xué)習(xí)
推薦閱讀
我在阿里招前端，我該怎么幫你？（現(xiàn)在還能加我進(jìn)模擬面試群）
若川知乎問答：2年前端經(jīng)驗(yàn)，做的項(xiàng)目沒什么技術(shù)含量，怎么辦？
點(diǎn)擊上方卡片關(guān)注我、加個星標(biāo)，或者查看源碼等系列文章。
學(xué)習(xí)源碼整體架構(gòu)系列、年度總結(jié)、JS基礎(chǔ)系列
總結(jié)
以上是生活随笔為你收集整理的VueConf China 2021 《Vue3生态进展-尤雨溪》 Reaction的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（3121）：组件和模块
- 下一篇： 一文读懂vuex4源码，原来provid