2014 年 2 月 3 日，Vue 在 Hacker News 上首次亮相。十年后的今天，Vue 已經成為使用最廣泛的前端框架之一，擁有了一個非常豐富的生態系統。本文來梳理一下 Vue.js 十年以來的重要里程碑！mGj28資訊網——每日最新資訊28at.com
圖片mGj28資訊網——每日最新資訊28at.com
尤雨溪，無疑是 Vue.js 背后的靈魂人物。早在 2013 年，他還在 Google 工作，便接觸到了 Google 團隊開發的強大前端框架 Angular。他對 Angular 的產生了興趣，但覺得它并不完美。因此，決定打造一款更為輕量且用戶友好的前端框架，這就是我們今天所熟知的 Vue.js。自此，Vue 的故事就開始了...mGj28資訊網——每日最新資訊28at.com
圖片mGj28資訊網——每日最新資訊28at.com
庫階段（2013-2015）
在 2013 年至 2015 年期間，可以將 Vue 視為處于庫階段。那么，庫和框架的區別到底是什么呢？庫更多地被視為嵌入到已有的體系中，只是簡單地拿來使用。而框架則定義了更廣泛的一套工程實踐，遵循一定的最佳實踐，并使用配套的工具來遵循一整套規范。因此，當時的Vue只是一個庫。mGj28資訊網——每日最新資訊28at.com
圖片mGj28資訊網——每日最新資訊28at.com
- 2013.12：發布第一個以“Vue.js”命名的版本（0.6.0），在此之前的版本都叫 Seed；
- 2014.02：第一次在 HackerNews 上公開發，公開后的第一周獲得了 400+ Github Star；
- 2014.10：第一次實現 Vue SFC 單文件組件（vueify），使用 Browserify 打包；
- 2014.11：第一次完全重寫（0.11），考慮如何讓它更適合用在生產環境中。
庫階段的設計重點：mGj28資訊網——每日最新資訊28at.com
- 基于 ES5 的 getter/setters 和原生 JavaScript 對象實現響應式系統，當時的設計重點就是滿足個人設計和實現上的想法和興趣；
- 基于響應式系統實現模版數據綁定（MVVM）；
- 設計重點就是能像 JQuery 一樣可以直接通過<script>標簽直接引用的簡單庫，這種方式不會對其他方面產生意見和限制。
庫階段的特征：mGj28資訊網——每日最新資訊28at.com
- Vue 還不算一個框架；
- 當時的 API 受到了 Backbone/Ractive 的影響：
響應式系統和組件實例有很強的耦合，所有響應式的內容都需要通過在this上做操作來實現，這樣的實現比較直觀，容易理解，符合基于class思考的思維模式，但是會影響邏輯復用；mGj28資訊網——每日最新資訊28at.com
直到 0.11 版本才引入 Mixins（混入）；mGj28資訊網——每日最新資訊28at.com
- 該階段還在摸索完善模板語法和作用域規則，每個版本的模板語法都會有比較重大的變動，并且作用域規則不是很明確；
- 基于 DOM 的渲染機制：
模板和編譯后的 JavaScript 之間沒有對應性，當時的 Vue 并沒有“編譯”過程；mGj28資訊網——每日最新資訊28at.com
當時的 Vue 的實現通過把模板直接實例化為 DOM 樹；mGj28資訊網——每日最新資訊28at.com
遍歷實例化之后的 DOM 樹，在遍歷過程中實現數據綁定；mGj28資訊網——每日最新資訊28at.com
類似于現在 petite-vue 的實現，它是在 Vue 3 之后，重新將 Vue 1 的實現構成一個更輕量的實現，可以將 petite-vue 認為是 Vue 1的一個新的展現， 把 Vue 1 的實現以更現代的方式去提供出來，其更適用于更輕量化的、不需要很多工程化介入的場景。mGj28資訊網——每日最新資訊28at.com
框架階段（2015-2016）
2015-2016 年，Vue 就進入了框架階段，以 1.X 版本為目標。mGj28資訊網——每日最新資訊28at.com
圖片mGj28資訊網——每日最新資訊28at.com
框架階段的重要里程碑：mGj28資訊網——每日最新資訊28at.com
- 2015.08：發布第一版 Vue Router；
- 2015.09：基于0.11、0.12版本開始開發 Vue 1.0，主要是完善模板語法；
- 2015.10.26：發布 Vue 1.0，代號為 Evangelion；
- 2015.12：發布第一版 vue-cli，它更像是一個拉模板的工具，將配置好的模板拉到本地；
- 2016.03：發布第一版 Vuex。
框架階段的設計重點：mGj28資訊網——每日最新資訊28at.com
確定了 v-bind、v-on 和對應簡寫的語法；mGj28資訊網——每日最新資訊28at.com
第一次引入了 v-for（取代了 v-repeat）；mGj28資訊網——每日最新資訊28at.com
將 Vue 項目的涵蓋范疇擴大到了單頁面應用（SPA）框架mGj28資訊網——每日最新資訊28at.com
SPA 路由；mGj28資訊網——每日最新資訊28at.com
狀態管理；mGj28資訊網——每日最新資訊28at.com
工具鏈：實現了單文件組件的熱更新支持和Scoped CSS。mGj28資訊網——每日最新資訊28at.com
通用框架階段（2016-2019）
2016-2019 年，Vue 進入了通用框架階段，以 2.X 版本為目標。mGj28資訊網——每日最新資訊28at.com
圖片mGj28資訊網——每日最新資訊28at.com
通用框架階段的重要里程碑：mGj28資訊網——每日最新資訊28at.com
- 2016.03：第一次明確提出“漸進式框架”的概念；
- 2016.04：開始開發 Vue 2.0，尤雨溪正式離職開始全職開發 Vue；
- 2016.10.01：發布 Vue 2.0，代號為 Ghost in the Shell；
- 2016.11：發布 Vue 2.1，代號為 Hunter X Hunter，引入了作用域插槽；
- 2017.02：發布 Vue 2.2，代號為 Initial D，SSR 支持基于路由的代碼分割，每個路由的代碼可以懶加載；
- 2017.04：發布 Vue 2.3，代號為 JoJo，SSR 支持基于路由的資源預加載；
- 2017.07：發布 Vue 2.4，代號為 Kill la Kill，SSR 完整異步組件支持，可以在 SSR 應用的任何地方使用異步組件，引入了部分優化的 SSR 編譯輸出；
- **2017.10：發布 Vue 2.5，代號為 Level E，**該版本引入了新的錯誤處理鉤子函數、改進了模板表達式錯誤消息和選項類型檢查、提供更好的TypeScript類型聲明支持。
- **2019.2：**發布 Vue 2.6，代號為 Macross，該版本實現了新的v-slot語法、在函數式組件中添加了scopedSlots、為生命周期鉤子和v-on處理程序提供了同步和異步錯誤處理、支持動態指令參數、添加了Vue.observable()方法用于創建可觀察對象、在$scopedSlots上暴露了所有普通插槽等。
- 2018.01-08：開發 Vue Cli 3.0，進一步擴展框架的邊界，將工具鏈視為框架的一部分；實現針對 SPA 的高度集成的工具鏈，有插件機制，開箱即用，集成 TypeScript 、單元測試、ESLint 等；
Vue 2.0 階段的設計重點：mGj28資訊網——每日最新資訊28at.com
- Vue 的第二次徹底重寫，目標是改進代碼的架構，提高其長期的可維護性，目前來看 2.0 版本的可維護性依然是相當可以的；
- 引入了將模板編譯為 Virtual DOM 渲染函數的編譯流程，也就是在 2.0 才引入了“模板編譯”的概念；
- 基于 Virtual DOM 的服務端渲染（SSR），先編譯為 Virtual DOM 的渲染函數，生成 Virtual DOM，再將 Virtual DOM 字符串化，類似于 React 的服務端渲染；
- 基于 Virtual DOM 的 跨端渲染（整合 Weex，NativeScript）；
- 結合類型系統：
在源碼中使用 Flow 定義類型；mGj28資訊網——每日最新資訊28at.com
直到現在，2.x 版本的 TypeScript 類型定義都需要手動維護，而不是從源代碼中生成的，這也是在 Vue 3 中使用 TypeScript 進行重寫的原因之一。mGj28資訊網——每日最新資訊28at.com
這個階段有一個重要的 demo：vue-hackernews-2.0：mGj28資訊網——每日最新資訊28at.com
- 使用 Webpack + SFC + Vue Router + Vuex + SSR 實現；
- 第一個完整展示 Vue 2 SSR 架構的 demo，包含了相關的 Webpack 配置，單文件組件如何針對客戶端和服務端進行不同的編譯配置，如何在重構的架構中使用路由、狀態管理等；
- 利用這個 demo 做了很多 Vue 2 SSR 功能的開發，通過這個 demo 來測 Vue 2 SSR 在實際開發中是否易用；
- 這個 demo 更重要的意義是啟發了上層的 SSR 框架，比如 Nuxt.js，Nuxt 最初就參照這個 demo 實現，并吸取了 Next.js 的經驗。
編譯/運行時混合階段（2019-至今）
2019年至今，Vue 進入了編譯/運行時混合階段。雖然 2.0 階段引入了編譯，但是 2.0 的編譯和運行時的結合是非常淺的結合，編譯器編譯出 Virtual DOM 渲染函數就到此為止了，編譯器對運行時是怎么樣的并沒有太多概念，而運行時對于編譯器也是沒有概念的，這樣很多優化空間就被浪費了。所以 3.0 階段的主要目標就是讓編譯器和運行時都屬于框架的一部分，它們本身就是耦合的。 在耦合的前提下，讓編譯器為運行時提供更多的信息，讓運行時知道編譯器提供的信息。mGj28資訊網——每日最新資訊28at.com
圖片mGj28資訊網——每日最新資訊28at.com
編譯/運行時混合階段的重要里程碑：mGj28資訊網——每日最新資訊28at.com
- 2018.09：在 Vue.js London 宣布 Vue 3 的開發計劃；
- 2018.09 - 2019.05：調研階段；
- 2019.05：實現基于編譯優化 Virtual DOM 性能的新策略；
- 2019.08：提出 Composition API RFC；
- 2020.01：發布 Vue 3.0 alpha 版本；
- 2020.04：發布 Vue 3.0 beta 版本，引入了完全優化的 SSR 編譯輸出，如果組件是用模板寫的，那它的 SSR 編譯輸出不存在任何 Virtual DOM 的開銷，所有能做成字符串拼接的地方都做成了字符串拼接；
- 2020.04 - 2021.02：繞道開發了 Vite。
- 2020.09：Vue 3.0 穩定版正式發布；
- 2021.06：發布 Vue 3.1 版本，提供 Migration Build，使用可以兼容 Vue 2 的用法讓用戶更方便的升級；
- 2021.08：發布 Vue 3.2 版本，引入了 <script setup>。
- 2022.01：Vue 3 正式切換為默認版本，此時 Vue 3 框架范疇內的工具都準備完畢；
- 2022.02：發布全新的 Vue 3 文檔；
- 2022.06：發布 Vue 2.7，進一步彌補了 2 和 3 之間的斷層，提供了一個 2->3 更緩和的升級流程。不過，如果現在的 Vue 2 項目很穩定，沒必要為了升級而升級；
- 2023.05：發布 Vue 3.3，主要針對開發者體驗進行了改進，特別是在使用 TypeScript 時的 SFC <script setup>，解決了在使用 TypeScript 時存在的許多長期困擾問題。
- 2023.12：發布 Vue 2.7.16，版本號為 Swan Song，意為絕唱。這是 Vue 2 的最后一個版本。
- 2023.12：發布 Vue 3.4，該版本重寫了模板解析器。新的解析器將速度提高了 2 倍，顯著提升了整體性能。此外，響應性系統也經過了重構，使得 effect 觸發更為精確和高效。
- 2023.12.31：Vue 2 正式停止維護，團隊將把精力全部放在維護 Vue 3 上。
Vue 3.0 重構初期的重心：mGj28資訊網——每日最新資訊28at.com
- 提高瀏覽器的最低支持要求，使用現代 ES 語法和功能；
- 全面提升系統；
- 改善類型系統的整合；
- 改善在大型應用中的可擴展性。2018年慢慢開始有有較大型企業、項目開始使用Vue，讓 Vue 遇到了新的挑戰，在實際的場景中，之前的 Vue 設計在比較大的團隊協作的場景中存在可維護性上的問題，希望在 Vue 3 中找到這些問題的解決方案。
Composition API 的意義：mGj28資訊網——每日最新資訊28at.com
- Vue 的用例越來越多地進入企業、大型項目領域；
- Options API 在可擴展性方面有明顯的上限，對于重構龐大、臃腫的組件有很大的難度，不能輕松的進行邏輯的重新組織。而 Composition API 對邏輯的可維護、組合、復用提供了很好的解決方案；
- 因為 Composition API 更多的依賴函數調用，所以對類型系統更友好；
- 提供靈活且可維護的邏輯組合/復用。
Vite 的意義：mGj28資訊網——每日最新資訊28at.com
- Vite 大幅優化了開發體驗；
- 將和框架沒有耦合的工具鏈職責剝離，交給一個更大的社區去維護，這樣也會樣 Vue 的體驗變得更好；
- 減少 Vue 本身的框架范疇和維護負擔：Vue CLI -> create-vue
整體趨勢就是向編譯/運行時混合模式進化：mGj28資訊網——每日最新資訊28at.com
在瀏覽器中：輸出高度優化的 Virtual DOM 渲染函數；mGj28資訊網——每日最新資訊28at.com
在 SSR 中：輸出 buffer + 字符串拼接；mGj28資訊網——每日最新資訊28at.com
將來：Vapar mode（不依賴 Virtual DOM 的渲染代碼，獲得更好的性能）mGj28資訊網——每日最新資訊28at.com
- 在單文件組件中引入更多的語法糖：
<script setup>；mGj28資訊網——每日最新資訊28at.com
v-bind()：實現動態 CSS 的綁定；mGj28資訊網——每日最新資訊28at.com
Reactivity Transform；mGj28資訊網——每日最新資訊28at.com
面向未來
Vue 團隊目前在重點開發 Vapor mode。這是一種正在試驗中的編譯策略，其靈感來源于 Solid。對于相同的 Vue SFC，與當前基于虛擬 DOM 的編譯結果相比，Vapor Mode 能夠生成性能更高、內存使用更少、運行時支持代碼更少的 JavaScript 輸出。它的目標是通過編譯為更高效的 JavaScript 來提升應用的性能。當在應用級別使用時，Vapor Mode 可以完全去除虛擬 DOM，從而減小應用的包大小，進一步優化應用的性能。mGj28資訊網——每日最新資訊28at.com
Vue 2 已經停止維護，這是一個時代的結束，也是一個新時代的開始，2024 年對 Vue 來說將是激動人心的一年！mGj28資訊網——每日最新資訊28at.com
本文鏈接：http://m.www897cc.com/showinfo-26-74196-0.htmlVue 發布十年了！你知道我這十年是怎么過的嗎？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 關于 Next.js 你不知道的事情
下一篇： 挑把趁手的兵器 | VSCode配置C/C++學習環境
津公網安備 12010102000574號