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

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

Vue 十年回顧

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

• Vue 代碼庫(kù)已有 9244 次提交；
• Vue 已發(fā)布 490 個(gè)版本；
• Vue 全球擁有超過(guò) 200 萬(wàn)用戶(hù)；
• Vue GitHub 存儲(chǔ)庫(kù)已有超過(guò) 25 萬(wàn) Star；
• Vue 的每周 Npm 下載量超過(guò) 460 萬(wàn)；
• Vue 的每月 CDN 請(qǐng)求量超過(guò) 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í)間線(xiàn)：

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

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

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

Vue 未來(lái)展望

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

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

2023 年 12 月，Vue 發(fā)布了 3.4 版本，該版本主要帶來(lái)了以下更新：

• 解析器速度提高 2 倍，SFC 構(gòu)建性能提升
• 更高效的響應(yīng)式系統(tǒng)
• defineModel 已穩(wěn)定
• v-bind 同名縮寫(xiě)

在即將到來(lái)的 Vue 3.5 中，將帶來(lái)以下改進(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)代碼生成策略，確保組件生成的代碼較小。
• 接下來(lái)的工作：正確整理組件模型，在 Vapor 模式下開(kāi)銷(xiāo)盡可能低。

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

開(kāi)發(fā)體驗(yàn)改進(jìn)：

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

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

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

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

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

小結(jié)

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