尤雨溪：Vue 未來展望
十年，一個(gè)既漫長(zhǎng)又短暫的時(shí)光跨度，對(duì)于技術(shù)世界來說，更是滄海桑田的瞬間。在這十年里，Vue.js 從無到有，從默默無聞到蜚聲全球，不僅改變了前端開發(fā)的面貌，更成為了無數(shù)開發(fā)者手中的得力工具。
在 2024 年的 Vue Amsterdam 大會(huì)上，Vue 的作者尤雨溪發(fā)表了題為《10 Years of Vue》的演講。本文就來簡(jiǎn)單總結(jié)一下這次演講，回顧 Vue 的過去十年，并展望未來！
Vue 十年回顧
2014 年 2 月 3 日，Vue 在 Hacker News 上首次亮相。十年后的今天，Vue 已經(jīng)成為使用最廣泛的前端框架之一。目前：
- Vue 代碼庫(kù)已有 9244 次提交；
- Vue 已發(fā)布 490 個(gè)版本；
- Vue 全球擁有超過 200 萬用戶；
- Vue GitHub 存儲(chǔ)庫(kù)已有超過 25 萬 Star；
- Vue 的每周 Npm 下載量超過 460 萬；
- Vue 的每月 CDN 請(qǐng)求量超過 10 億。
在這十年里，Vue 也產(chǎn)生了很多技術(shù)影響，包括：
- 首個(gè)基于深度追蹤實(shí)現(xiàn)響應(yīng)性的項(xiàng)目。
- 首個(gè)將單文件組件概念與構(gòu)建工具相結(jié)合的項(xiàng)目
- Composition API 首次將信號(hào)式響應(yīng)性與現(xiàn)代組件模型相結(jié)合。
- 首個(gè)探索編譯器驅(qū)動(dòng)的信號(hào)響應(yīng)性增強(qiáng)的項(xiàng)目
- 唯一支持模板和虛擬DOM渲染函數(shù)的框架。
- 首創(chuàng)了漸進(jìn)式框架的概念：一致但可逐步采用的層級(jí)結(jié)構(gòu)。
簡(jiǎn)單回顧 Vue 主要的發(fā)展時(shí)間線：
- 2013年：首次以“VueS”之名發(fā)布
- 2014年2月：首次公開宣布
- 2015年10月：Vue 1.0 發(fā)布
- 2016年10月：Vue 2.0 發(fā)布，尤雨溪開始全職投入 Vue 開發(fā)
- 2018年9月：?jiǎn)?dòng)開發(fā) Vue 3.0 版本
- 2020年9月：Vue 3.0 發(fā)布
- 2022年1月：Vue 3.0 成為默認(rèn)版本
- 2023年12月：Vue 2.0 生命周期結(jié)束，不再得到官方支持
目前，Vue 是唯一保持獨(dú)立的主流框架，不受任何公司的主導(dǎo)和支持，未來的發(fā)展不會(huì)受到制約。
Vue 社區(qū)不僅推動(dòng)了 Vue 本身的發(fā)展，還助力了整個(gè) JavaScript 生態(tài)系統(tǒng)的發(fā)展。例如：
- Vite：最初為 Vue 設(shè)計(jì)，但如今已演變成與框架無關(guān)的開發(fā)工具，成為推動(dòng)新一代前端元框架崛起的重要因素。
- Volar：作為語(yǔ)言支持的核心，Volar 為 VS Code 中的 Vue 單文件組件提供了全面的 TypeScript 支持、智能自動(dòng)完成和類型檢查。
- Unjs：由 Nuxt 團(tuán)隊(duì)開發(fā)，現(xiàn)已成為眾多開發(fā)者選擇的工具集。
- Nitro：作為 Nuxt 的底層驅(qū)動(dòng)力，它已成為許多框架構(gòu)建的基礎(chǔ)。
Vue 未來展望
Vue 3 在 2023 年的使用量增加了 72%：
目前，Vue 3 的下載量達(dá)到了 Vue 整體下載量的 56%，隨著 Vue 2 生命周期的結(jié)束，Vue 3 的下載量一直在快速增長(zhǎng)：
2023 年 12 月，Vue 發(fā)布了 3.4 版本，該版本主要帶來了以下更新：
- 解析器速度提高 2 倍，SFC 構(gòu)建性能提升
- 更高效的響應(yīng)式系統(tǒng)
- defineModel 已穩(wěn)定
- v-bind 同名縮寫
在即將到來的 Vue 3.5 中，將帶來以下改進(jìn)：
- 進(jìn)一步提升性能：
- 內(nèi)存使用減少56%
- 大型響應(yīng)式數(shù)組性能提升 10 倍
- 服務(wù)端渲染改進(jìn)：
Vapor 模式目前的進(jìn)展：
- 支持懶水合
- Suspense 穩(wěn)定版
- 支持 useId
Vapor 模式目前的進(jìn)展：
- Vapor 現(xiàn)在可以運(yùn)行 TodoMVC
- 目前的重點(diǎn)是性能調(diào)優(yōu)和改進(jìn)代碼生成策略，確保組件生成的代碼較小。
- 接下來的工作：正確整理組件模型，在 Vapor 模式下開銷盡可能低。
Vapor 模式是一種正在試驗(yàn)中的編譯策略，其靈感來源于 Solid。對(duì)于相同的 Vue SFC，與當(dāng)前基于虛擬 DOM 的編譯結(jié)果相比，Vapor Mode 能夠生成性能更高、內(nèi)存使用更少、運(yùn)行時(shí)支持代碼更少的 JavaScript 輸出。它的目標(biāo)是通過編譯為更高效的 JavaScript 來提升應(yīng)用的性能。當(dāng)在應(yīng)用級(jí)別使用時(shí)，Vapor Mode 可以完全去除虛擬 DOM，從而減小應(yīng)用的包大小，進(jìn)一步優(yōu)化應(yīng)用的性能。
開發(fā)體驗(yàn)改進(jìn)：
- 通過優(yōu)化更底層的工具鏈來進(jìn)一步完善 Vite：
- Rolldown（基于 Oxc 構(gòu)建，即將開源）
- Oxc
- 從 Nuxt / Vue Devtool 中提取可重用的層。
- 在 Volar 2 中進(jìn)一步改進(jìn)體驗(yàn)。
Rolldown 是使用 Rust 開發(fā)的 Rollup 替代品。它的重點(diǎn)將放在本地級(jí)別的性能上，同時(shí)盡可能與 Rollup 保持兼容。最終目標(biāo)是在 Vite 中切換到 Rolldown，并對(duì)用戶產(chǎn)生最小的影響。
目前，Rolldown 仍處于早期的開發(fā)階段。原始的 Rolldown 項(xiàng)目在很久之前就開始了，它或多或少是 Rspack 的前身，字節(jié)跳動(dòng)的 Webpack 的 Rust 移植版本。
小結(jié)
展望未來，Vue 的旅程仍將繼續(xù)。隨著 Vue 3 的不斷成熟和完善，以及 Vapor 模式等創(chuàng)新技術(shù)的探索，我們有理由相信，Vue 將繼續(xù)引領(lǐng)前端開發(fā)的潮流。讓我們共同期待 Vue 的下一個(gè)十年，期待它帶給我們更多的驚喜和可能！
