2014 年 2 月 3 日，Vue 在 Hacker News 上首次亮相。十年后的今天，Vue 已經成為使用最廣泛的前端框架之一，擁有了一個非常豐富的生態(tài)系統(tǒng)。本文來梳理一下 Vue.js 十年以來的重要里程碑！

圖片

尤雨溪，無疑是 Vue.js 背后的靈魂人物。早在 2013 年，他還在 Google 工作，便接觸到了 Google 團隊開發(fā)的強大前端框架 Angular。他對 Angular 的產生了興趣，但覺得它并不完美。因此，決定打造一款更為輕量且用戶友好的前端框架，這就是我們今天所熟知的 Vue.js。自此，Vue 的故事就開始了...

圖片

庫階段（2013-2015）

在 2013 年至 2015 年期間，可以將 Vue 視為處于庫階段。那么，庫和框架的區(qū)別到底是什么呢？庫更多地被視為嵌入到已有的體系中，只是簡單地拿來使用。而框架則定義了更廣泛的一套工程實踐，遵循一定的最佳實踐，并使用配套的工具來遵循一整套規(guī)范。因此，當時的Vue只是一個庫。

圖片

• 2013.12：發(fā)布第一個以“Vue.js”命名的版本（0.6.0），在此之前的版本都叫 Seed；
• 2014.02：第一次在 HackerNews 上公開發(fā)，公開后的第一周獲得了 400+ Github Star；
• 2014.10：第一次實現(xiàn) Vue SFC 單文件組件（vueify），使用 Browserify 打包；
• 2014.11：第一次完全重寫（0.11），考慮如何讓它更適合用在生產環(huán)境中。

庫階段的設計重點：

• 基于 ES5 的 getter/setters 和原生 JavaScript 對象實現(xiàn)響應式系統(tǒng)，當時的設計重點就是滿足個人設計和實現(xiàn)上的想法和興趣；
• 基于響應式系統(tǒng)實現(xiàn)模版數據綁定（MVVM）；
• 設計重點就是能像 JQuery 一樣可以直接通過<script>標簽直接引用的簡單庫，這種方式不會對其他方面產生意見和限制。

庫階段的特征：

• Vue 還不算一個框架；
• 當時的 API 受到了 Backbone/Ractive 的影響

響應式系統(tǒng)和組件實例有很強的耦合，所有響應式的內容都需要通過在this上做操作來實現(xiàn)，這樣的實現(xiàn)比較直觀，容易理解，符合基于class思考的思維模式，但是會影響邏輯復用；

直到 0.11 版本才引入 Mixins（混入）；

• 該階段還在摸索完善模板語法和作用域規(guī)則，每個版本的模板語法都會有比較重大的變動，并且作用域規(guī)則不是很明確；
• 基于 DOM 的渲染機制；
• 模板和編譯后的 JavaScript 之間沒有對應性，當時的 Vue 并沒有“編譯”過程；
• 當時的 Vue 的實現(xiàn)通過把模板直接實例化為 DOM 樹；
• 遍歷實例化之后的 DOM 樹，在遍歷過程中實現(xiàn)數據綁定；
• 類似于現(xiàn)在 petite-vue 的實現(xiàn)，它是在 Vue 3 之后，重新將 Vue 1 的實現(xiàn)構成一個更輕量的實現(xiàn)，可以將 petite-vue 認為是 Vue 1的一個新的展現(xiàn)， 把 Vue 1 的實現(xiàn)以更現(xiàn)代的方式去提供出來，其更適用于更輕量化的、不需要很多工程化介入的場景。

框架階段（2015-2016）

2015-2016 年，Vue 就進入了框架階段，以 1.X 版本為目標。

圖片

框架階段的重要里程碑：

• 2015.08：發(fā)布第一版 Vue Router；
• 2015.09：基于0.11、0.12版本開始開發(fā) Vue 1.0，主要是完善模板語法；
• 2015.10.26：發(fā)布 Vue 1.0，代號為 Evangelion；
• 2015.12：發(fā)布第一版 vue-cli，它更像是一個拉模板的工具，將配置好的模板拉到本地；
• 2016.03：發(fā)布第一版 Vuex。

框架階段的設計重點：

• 穩(wěn)定模板語法和作用域的設計：

確定了 v-bind、v-on 和對應簡寫的語法；

第一次引入了 v-for（取代了 v-repeat）；

將 Vue 項目的涵蓋范疇擴大到了單頁面應用（SPA）框架

• SPA 路由；
• 狀態(tài)管理；
• 工具鏈：實現(xiàn)了單文件組件的熱更新支持和Scoped CSS。

通用框架階段（2016-2019）

2016-2019 年，Vue 進入了通用框架階段，以 2.X 版本為目標。

圖片

通用框架階段的重要里程碑：

• 2016.03：第一次明確提出“漸進式框架”的概念；
• 2016.04：開始開發(fā) Vue 2.0，尤雨溪正式離職開始全職開發(fā) Vue；
• 2016.10.01：發(fā)布 Vue 2.0，代號為 Ghost in the Shell；
• 2016.11：發(fā)布 Vue 2.1，代號為 Hunter X Hunter，引入了作用域插槽；
• 2017.02：發(fā)布 Vue 2.2，代號為 Initial D，SSR 支持基于路由的代碼分割，每個路由的代碼可以懶加載；
• 2017.04：發(fā)布 Vue 2.3，代號為 JoJo，SSR 支持基于路由的資源預加載；
• 2017.07：發(fā)布 Vue 2.4，代號為 Kill la Kill，SSR 完整異步組件支持，可以在 SSR 應用的任何地方使用異步組件，引入了部分優(yōu)化的 SSR 編譯輸出；
• **2017.10：發(fā)布 Vue 2.5，代號為 Level E，**該版本引入了新的錯誤處理鉤子函數、改進了模板表達式錯誤消息和選項類型檢查、提供更好的TypeScript類型聲明支持。
• **2019.2：**發(fā)布 Vue 2.6，代號為 Macross，該版本實現(xiàn)了新的v-slot語法、在函數式組件中添加了scopedSlots、為生命周期鉤子和v-on處理程序提供了同步和異步錯誤處理、支持動態(tài)指令參數、添加了Vue.observable()方法用于創(chuàng)建可觀察對象、在$scopedSlots上暴露了所有普通插槽等。
• 2018.01-08：開發(fā) Vue Cli 3.0，進一步擴展框架的邊界，將工具鏈視為框架的一部分；實現(xiàn)針對 SPA 的高度集成的工具鏈，有插件機制，開箱即用，集成 TypeScript 、單元測試、ESLint 等；

Vue 2.0 階段的設計重點：

• Vue 的第二次徹底重寫，目標是改進代碼的架構，提高其長期的可維護性，目前來看 2.0 版本的可維護性依然是相當可以的；
• 引入了將模板編譯為 Virtual DOM 渲染函數的編譯流程，也就是在 2.0 才引入了“模板編譯”的概念；
• 基于 Virtual DOM 的服務端渲染（SSR），先編譯為 Virtual DOM 的渲染函數，生成 Virtual DOM，再將 Virtual DOM 字符串化，類似于 React 的服務端渲染；
• 基于 Virtual DOM 的 跨端渲染（整合 Weex，NativeScript）；
• 結合類型系統(tǒng)：

在源碼中使用 Flow 定義類型；

直到現(xiàn)在，2.x 版本的 TypeScript 類型定義都需要手動維護，而不是從源代碼中生成的，這也是在 Vue 3 中使用 TypeScript 進行重寫的原因之一。

這個階段有一個重要的 demo：vue-hackernews-2.0：

• 使用 Webpack + SFC + Vue Router + Vuex + SSR 實現(xiàn)；
• 第一個完整展示 Vue 2 SSR 架構的 demo，包含了相關的 Webpack 配置，單文件組件如何針對客戶端和服務端進行不同的編譯配置，如何在重構的架構中使用路由、狀態(tài)管理等；
• 利用這個 demo 做了很多 Vue 2 SSR 功能的開發(fā)，通過這個 demo 來測 Vue 2 SSR 在實際開發(fā)中是否易用；
• 這個 demo 更重要的意義是啟發(fā)了上層的 SSR 框架，比如 Nuxt.js，Nuxt 最初就參照這個 demo 實現(xiàn)，并吸取了 Next.js 的經驗。

編譯/運行時混合階段（2019-至今）

2019年至今，Vue 進入了編譯/運行時混合階段。雖然 2.0 階段引入了編譯，但是 2.0 的編譯和運行時的結合是非常淺的結合，編譯器編譯出 Virtual DOM 渲染函數就到此為止了，編譯器對運行時是怎么樣的并沒有太多概念，而運行時對于編譯器也是沒有概念的，這樣很多優(yōu)化空間就被浪費了。所以 3.0 階段的主要目標就是讓編譯器和運行時都屬于框架的一部分，它們本身就是耦合的。 在耦合的前提下，讓編譯器為運行時提供更多的信息，讓運行時知道編譯器提供的信息。

圖片

編譯/運行時混合階段的重要里程碑：

• 2018.09：在 Vue.js London 宣布 Vue 3 的開發(fā)計劃；
• 2018.09 - 2019.05：調研階段；
• 2019.05：實現(xiàn)基于編譯優(yōu)化 Virtual DOM 性能的新策略；
• 2019.08：提出 Composition API RFC；
• 2020.01：發(fā)布 Vue 3.0 alpha 版本；
• 2020.04：發(fā)布 Vue 3.0 beta 版本，引入了完全優(yōu)化的 SSR 編譯輸出，如果組件是用模板寫的，那它的 SSR 編譯輸出不存在任何 Virtual DOM 的開銷，所有能做成字符串拼接的地方都做成了字符串拼接；
• 2020.04 - 2021.02：繞道開發(fā)了 Vite。
• 2020.09：Vue 3.0 穩(wěn)定版正式發(fā)布；
• 2021.06：發(fā)布 Vue 3.1 版本，提供 Migration Build，使用可以兼容 Vue 2 的用法讓用戶更方便的升級；
• 2021.08：發(fā)布 Vue 3.2 版本，引入了 <script setup>。
• 2022.01：Vue 3 正式切換為默認版本，此時 Vue 3 框架范疇內的工具都準備完畢；
• 2022.02：發(fā)布全新的 Vue 3 文檔；
• 2022.06：發(fā)布 Vue 2.7，進一步彌補了 2 和 3 之間的斷層，提供了一個 2->3 更緩和的升級流程。不過，如果現(xiàn)在的 Vue 2 項目很穩(wěn)定，沒必要為了升級而升級；
• 2023.05：發(fā)布 Vue 3.3，主要針對開發(fā)者體驗進行了改進，特別是在使用 TypeScript 時的 SFC <script setup>，解決了在使用 TypeScript 時存在的許多長期困擾問題。
• 2023.12：發(fā)布 Vue 2.7.16，版本號為 Swan Song，意為絕唱。這是 Vue 2 的最后一個版本。
• 2023.12：發(fā)布 Vue 3.4，該版本重寫了模板解析器。新的解析器將速度提高了 2 倍，顯著提升了整體性能。此外，響應性系統(tǒng)也經過了重構，使得 effect 觸發(fā)更為精確和高效。
• 2023.12.31：Vue 2 正式停止維護，團隊將把精力全部放在維護 Vue 3 上。

Vue 3.0 重構初期的重心：

• 提高瀏覽器的最低支持要求，使用現(xiàn)代 ES 語法和功能；
• 全面提升系統(tǒng)；
• 改善類型系統(tǒng)的整合；
• 改善在大型應用中的可擴展性。2018年慢慢開始有有較大型企業(yè)、項目開始使用Vue，讓 Vue 遇到了新的挑戰(zhàn)，在實際的場景中，之前的 Vue 設計在比較大的團隊協(xié)作的場景中存在可維護性上的問題，希望在 Vue 3 中找到這些問題的解決方案。

Composition API 的意義：

• Vue 的用例越來越多地進入企業(yè)、大型項目領域；
• Options API 在可擴展性方面有明顯的上限，對于重構龐大、臃腫的組件有很大的難度，不能輕松的進行邏輯的重新組織。而 Composition API 對邏輯的可維護、組合、復用提供了很好的解決方案；
• 因為 Composition API 更多的依賴函數調用，所以對類型系統(tǒng)更友好；
• 提供靈活且可維護的邏輯組合/復用。

Vite 的意義：

• Vite 大幅優(yōu)化了開發(fā)體驗；
• 將和框架沒有耦合的工具鏈職責剝離，交給一個更大的社區(qū)去維護，這樣也會樣 Vue 的體驗變得更好；
• 減少 Vue 本身的框架范疇和維護負擔：Vue CLI -> create-vue

整體趨勢就是向編譯/運行時混合模式進化：

• 同一份模板，不同的編譯輸出：

在瀏覽器中：輸出高度優(yōu)化的 Virtual DOM 渲染函數；

在 SSR 中：輸出 buffer + 字符串拼接；

將來：Vapar mode（不依賴 Virtual DOM 的渲染代碼，獲得更好的性能）

• 在單文件組件中引入更多的語法糖：
• <script setup>；
• v-bind()：實現(xiàn)動態(tài) CSS 的綁定；
• Reactivity Transform

面向未來

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

Vue 2 已經停止維護，這是一個時代的結束，也是一個新時代的開始，2024 年對 Vue 來說將是激動人心的一年！