【Vue】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 支持
• 更多更多……

可以擴展閱讀筆者之前寫的淺談 Vite 2.0 原理，依賴預(yù)編譯，插件機制是如何兼容 Rollup 的？^[1]

Vite 還是 Vue-CLI？

• 短期內(nèi)會共存
• 長期會融合：Vite 的速度 + Vue-CLI 的全面度支持

測試

• Cypress 新版組件測試
• @web/test-runner
• Jest 集成進行中

看了下 @web/test-runner 的簡介，非常全面的測試解決方案：

VitePress

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

它的獨特之處在于：

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

利用 VitePress 這個平臺，探索未來 SSR/SSG 優(yōu)化（Eat Your Own Dog Food）

• 更積極的消除靜態(tài)內(nèi)容（甚至是主題組件）
• 更高效的構(gòu)建
• 按需構(gòu)建 + 邊緣緩存

新的開發(fā)體驗

利用編譯器做更多事情：

• script setup
• style CSS 變量注入

script setup

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

style 變量注入

• RFC 地址^[3]
• 利用 v-bind() 在單文件組件的 style 中注入 JS 狀態(tài)驅(qū)動的 CSS 變量
• CSS-in-JS 的好處盡享，但避免了它的心智負擔。

更好的 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 也進行了翻譯：

Vue3 考慮徹底放棄 IE 瀏覽器

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

Vue3 的集成構(gòu)建也要來了！

• 估計在四月末
• 可單獨配置來兼容 v2

Vue3 會在 2021 二季度末尾，變成新的默認版本！

• npm 的 lastest tag 會默認安裝 Vue3
• vuejs.org 官網(wǎng)會指向 Vue3 的文檔

感謝大家！

參考資料