今天來帶大家搶先看VueConf 2021，一起聊聊 Vue 的未來？

近況

158 萬周活躍用戶（通過 devtools 插件來統(tǒng)計(jì)），940 萬的月下載量。

對(duì)比去年

Devtools：110 萬 -> 158 萬（+43.6%） NPM：620 萬 -> 940 萬（+51.6%）

Vue 3.0 One Piece

自那之后，Vue3 逐漸趨于穩(wěn)定，繼續(xù)探索用戶體驗(yàn)。

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

用戶體驗(yàn)

持續(xù)探索中：

• 新的構(gòu)建工具
• 更棒的語法
• IDE/TS 支持

構(gòu)建工具

Vite，不用說了，今年的明星項(xiàng)目。

• 和 Vue-CLI 更加相似的體驗(yàn)
• 基于 ESM 的 HMR 熱更新
• ESBuild 提供依賴預(yù)構(gòu)建
• Rollup 兼容的插件接口
• 內(nèi)置 SSR 支持
• 更多更多……

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

Vite 還是 Vue-CLI？

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

測(cè)試

• Cypress 新版組件測(cè)試
• @web/test-runner
• Jest 集成進(jìn)行中

看了下 @web/test-runner 的簡(jiǎn)介，非常全面的測(cè)試解決方案：

VitePress

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

它的獨(dú)特之處在于：

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

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

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

新的開發(fā)體驗(yàn)

利用編譯器做更多事情：

• script setup
• style CSS 變量注入

script setup

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

style 變量注入

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

更好的 IDE/TS 支持

多個(gè)探索中的項(xiàng)目

• Vetur
• VueDX
• Volar

獲得了：

• 類型檢查，語法提示和 SFC templates 的自動(dòng)重構(gòu)

接下來：

• 把這些努力整合成更推薦的鏈路
• 提供 CLI 工具來利用 TS 校驗(yàn) SFC

計(jì)劃：

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

未來

我們?cè)?Vue3 中放棄了 IE11。

• RFC^[4]
• 討論^[5]

筆者對(duì)這個(gè) RFC 也進(jìn)行了翻譯：

Vue3 考慮徹底放棄 IE 瀏覽器

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

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

• 估計(jì)在四月末
• 可單獨(dú)配置來兼容 v2

Vue3 會(huì)在 2021 二季度末尾，變成新的默認(rèn)版本！

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

感謝大家！

參考資料

感謝大家

歡迎關(guān)注三元同學(xué)，前端潮流趨勢(shì)、原創(chuàng)面試熱點(diǎn)文章應(yīng)有盡有。

記得關(guān)注后加我好友，我會(huì)不定期分享前端知識(shí)，行業(yè)信息。2021 陪你一起度過。

點(diǎn)贊并分享給你的朋友是最好的支持~