十年，一個既漫長又短暫的時光跨度，對于技術(shù)世界來說，更是滄海桑田的瞬間。在這十年里，Vue.js 從無到有，從默默無聞到蜚聲全球，不僅改變了前端開發(fā)的面貌，更成為了無數(shù)開發(fā)者手中的得力工具。

在 2024 年的 Vue Amsterdam 大會上，Vue 的作者尤雨溪發(fā)表了題為《10 Years of Vue》的演講。本文就來簡單總結(jié)一下這次演講，回顧 Vue 的過去十年，并展望未來！

Vue 十年回顧

2014 年 2 月 3 日，Vue 在 Hacker News 上首次亮相。十年后的今天，Vue 已經(jīng)成為使用最廣泛的前端框架之一。目前：

• Vue 代碼庫已有 9244 次提交；
• Vue 已發(fā)布 490 個版本；
• Vue 全球擁有超過 200 萬用戶；
• Vue GitHub 存儲庫已有超過 25 萬 Star；
• Vue 的每周 Npm 下載量超過 460 萬；
• Vue 的每月 CDN 請求量超過 10 億。

在這十年里，Vue 也產(chǎn)生了很多技術(shù)影響，包括：

• 首個基于深度追蹤實現(xiàn)響應(yīng)性的項目。
• 首個將單文件組件概念與構(gòu)建工具相結(jié)合的項目
• Composition API 首次將信號式響應(yīng)性與現(xiàn)代組件模型相結(jié)合。
• 首個探索編譯器驅(qū)動的信號響應(yīng)性增強(qiáng)的項目
• 唯一支持模板和虛擬DOM渲染函數(shù)的框架。
• 首創(chuàng)了漸進(jìn)式框架的概念：一致但可逐步采用的層級結(jié)構(gòu)。

簡單回顧 Vue 主要的發(fā)展時間線：

• 2013年：首次以“VueS”之名發(fā)布
• 2014年2月：首次公開宣布
• 2015年10月：Vue 1.0 發(fā)布
• 2016年10月：Vue 2.0 發(fā)布，尤雨溪開始全職投入 Vue 開發(fā)
• 2018年9月：啟動開發(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ǎo)和支持，未來的發(fā)展不會受到制約。

Vue 社區(qū)不僅推動了 Vue 本身的發(fā)展，還助力了整個 JavaScript 生態(tài)系統(tǒng)的發(fā)展。例如：

• Vite：最初為 Vue 設(shè)計，但如今已演變成與框架無關(guān)的開發(fā)工具，成為推動新一代前端元框架崛起的重要因素。
• Volar：作為語言支持的核心，Volar 為 VS Code 中的 Vue 單文件組件提供了全面的 TypeScript 支持、智能自動完成和類型檢查。
• Unjs：由 Nuxt 團(tuán)隊開發(fā)，現(xiàn)已成為眾多開發(fā)者選擇的工具集。
• Nitro：作為 Nuxt 的底層驅(qū)動力，它已成為許多框架構(gòu)建的基礎(chǔ)。

Vue 未來展望

Vue 3 在 2023 年的使用量增加了 72%：

目前，Vue 3 的下載量達(dá)到了 Vue 整體下載量的 56%，隨著 Vue 2 生命周期的結(jié)束，Vue 3 的下載量一直在快速增長：

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)在可以運行 TodoMVC
• 目前的重點是性能調(diào)優(yōu)和改進(jìn)代碼生成策略，確保組件生成的代碼較小。
• 接下來的工作：正確整理組件模型，在 Vapor 模式下開銷盡可能低。

Vapor 模式是一種正在試驗中的編譯策略，其靈感來源于 Solid。對于相同的 Vue SFC，與當(dāng)前基于虛擬 DOM 的編譯結(jié)果相比，Vapor Mode 能夠生成性能更高、內(nèi)存使用更少、運行時支持代碼更少的 JavaScript 輸出。它的目標(biāo)是通過編譯為更高效的 JavaScript 來提升應(yīng)用的性能。當(dāng)在應(yīng)用級別使用時，Vapor Mode 可以完全去除虛擬 DOM，從而減小應(yīng)用的包大小，進(jìn)一步優(yōu)化應(yīng)用的性能。

開發(fā)體驗改進(jìn)：

• 通過優(yōu)化更底層的工具鏈來進(jìn)一步完善 Vite：

• Rolldown（基于 Oxc 構(gòu)建，即將開源）
• Oxc

• 從 Nuxt / Vue  Devtool 中提取可重用的層。
• 在 Volar 2 中進(jìn)一步改進(jìn)體驗。

Rolldown 是使用 Rust 開發(fā)的 Rollup 替代品。它的重點將放在本地級別的性能上，同時盡可能與 Rollup 保持兼容。最終目標(biāo)是在 Vite 中切換到 Rolldown，并對用戶產(chǎn)生最小的影響。

目前，Rolldown 仍處于早期的開發(fā)階段。原始的 Rolldown 項目在很久之前就開始了，它或多或少是 Rspack 的前身，字節(jié)跳動的 Webpack 的 Rust 移植版本。

小結(jié)

展望未來，Vue 的旅程仍將繼續(xù)。隨著 Vue 3 的不斷成熟和完善，以及 Vapor 模式等創(chuàng)新技術(shù)的探索，我們有理由相信，Vue 將繼續(xù)引領(lǐng)前端開發(fā)的潮流。讓我們共同期待 Vue 的下一個十年，期待它帶給我們更多的驚喜和可能！