VueConf 2021 搶先看,Evan You 和你聊聊 Vue 的未來!

近況

158 萬周活躍用戶(通過 devtools 插件來統(tǒng)計),940 萬的月下載量。
對比去年

Devtools:110 萬 -> 158 萬(+43.6%) NPM:620 萬 -> 940 萬(+51.6%)
Vue 3.0 One Piece


自那之后,Vue3 逐漸趨于穩(wěn)定,繼續(xù)探索用戶體驗。
Vue Router 4.0

已經(jīng)穩(wěn)定。
Vuex 4.0

已經(jīng)穩(wěn)定。
生態(tài)

慢慢趕上了!
Nuxt 3 Vuetify Quasar Element Plus Ant Design Vue
用戶體驗

持續(xù)探索中:
新的構(gòu)建工具 更棒的語法 IDE/TS 支持
構(gòu)建工具

Vite,不用說了,今年的明星項目。
和 Vue-CLI 更加相似的體驗 基于 ESM 的 HMR 熱更新 ESBuild 提供依賴預(yù)構(gòu)建 Rollup 兼容的插件接口 內(nèi)置 SSR 支持 更多更多……
可以擴(kuò)展閱讀筆者之前寫的淺談 Vite 2.0 原理,依賴預(yù)編譯,插件機(jī)制是如何兼容 Rollup 的?[1]

Vite 還是 Vue-CLI?
短期內(nèi)會共存 長期會融合:Vite 的速度 + Vue-CLI 的全面度支持
測試

Cypress 新版組件測試 @web/test-runner Jest 集成進(jìn)行中
看了下 @web/test-runner 的簡介,非常全面的測試解決方案:

VitePress

基于 Vue3 + Vite 的靜態(tài)站點生成器。

它的獨特之處在于:
利用 SPA 的開發(fā)體驗來定制用戶主題 在 Markdown 里自由加入動態(tài)組件 自動消除靜態(tài)內(nèi)容的“雙重負(fù)載”

利用 VitePress 這個平臺,探索未來 SSR/SSG 優(yōu)化(Eat Your Own Dog Food)
更積極的消除靜態(tài)內(nèi)容(甚至是主題組件) 更高效的構(gòu)建 按需構(gòu)建 + 邊緣緩存
新的開發(fā)體驗

利用編譯器做更多事情:
script setupstyleCSS 變量注入
script setup


RFC 地址[2] 在單文件組建中提供更符合用戶體驗的 Composition API 提高運行時性能
style 變量注入

RFC 地址[3] 利用 v-bind()在單文件組件的style中注入 JS 狀態(tài)驅(qū)動的 CSS 變量CSS-in-JS 的好處盡享,但避免了它的心智負(fù)擔(dān)。
更好的 IDE/TS 支持

多個探索中的項目
Vetur VueDX Volar
獲得了:
類型檢查,語法提示和 SFC templates 的自動重構(gòu)
接下來:
把這些努力整合成更推薦的鏈路 提供 CLI 工具來利用 TS 校驗 SFC

計劃:
基于 Volar 的新的官方 VSCode 插件,從 Vetur 和 VueDX 上汲取很多靈感。 通過內(nèi)部設(shè)計來支持其他編輯器,通過 LSP(Language Service Protocol)
未來

我們在 Vue3 中放棄了 IE11。
RFC[4] 討論[5]
筆者對這個 RFC 也進(jìn)行了翻譯:

Vue 2.7 會成為堅持留守 IE11 人群的選擇,它會提供更多的 Vue3 特性和 TS 支持。(估計在 2021 第三季度)

Vue3 的集成構(gòu)建也要來了!
估計在四月末 可單獨配置來兼容 v2


Vue3 會在 2021 二季度末尾,變成新的默認(rèn)版本!
npm 的 lastest tag 會默認(rèn)安裝 Vue3 vuejs.org 官網(wǎng)會指向 Vue3 的文檔

感謝大家!
參考資料
淺談 Vite 2.0 原理,依賴預(yù)編譯,插件機(jī)制是如何兼容 Rollup 的?: https://juejin.cn/post/6932367804108800007
[2]RFC 地址: https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
[3]RFC 地址: https://github.com/vuejs/rfcs/blob/style-vars-2/active-rfcs/0000-sfc-style-variables.md
[4]RFC: https://github.com/vuejs/rfcs/blob/ie11/active-rfcs/0000-vue3-ie11-support.md
[5]討論: https://github.com/vuejs/rfcs/discussions/296
最后
如果你覺得這篇內(nèi)容對你挺有啟發(fā),我想邀請你幫我三個小忙:
點個「在看」,讓更多的人也能看到這篇內(nèi)容(喜歡不點在看,都是耍流氓 -_-)
歡迎加我微信「 sherlocked_93 」拉你進(jìn)技術(shù)群,長期交流學(xué)習(xí)...
關(guān)注公眾號「前端下午茶」,持續(xù)為你推送精選好文,也可以加我為好友,隨時聊騷。

