去年 11 月，尤雨溪向外宣佈了 Vue 3.0 的關鍵更新。新版本所帶來的優化讓 Vue 更加高效、更加模塊化且更加易於使用。這篇文章將討論這些變化，以及我認爲這些變化將在 Vue 3.0 發佈後給 Web 開發世界帶來哪些影響。Vue 的現狀Vue 是“一個用於構建用戶應用程序的漸進式框架”。它的設計非常靈活，可以將單個 Vue 庫集成到其他項目中，也可以完全使用 Vue 構建複雜的項目。
Vue 通常被視爲一個易於理解和實現的框架，它支持純 HTML 模板，而 React 需要使用 JavaScript 定義來 DOM 元素。
截至 2019 年初，我們仍然在使用 Vue 2.0。儘管與 React 和 Angular 相比，Vue 目前只佔據了很小的市場份額，但 Vue 的受歡迎程度卻在不斷提升。在我看來，Vue 3.0 的發佈將會提升它的採用率，並讓自己成爲其他主要框架的替代品。
下圖顯示了每個框架對應的工作崗位數量。可見，Vue 在接近當前行業標準之前還有很長的路要走。
Vue 3.0 的重大變化尤雨溪在主題演講中強調了 Vue 3.0 的五個關鍵變化：
速度
體積
可維護性
面向原生
易用性
現在讓我們來深入探討這些變化。
速度更快這個額主題佔據了演講的大部分內容，因爲它體現了最重大的技術變化，是 Vue 目前的主要賣點之一。
Vue 以其渲染速度而聞名。在比較測試中，它的性能優於其他框架。不過，面對 2.0 中對代碼所做的修復，Vue 團隊決定使用微優化方法完全重寫渲染代碼。尤雨溪表示，這些優化可以使掛載和初始化速度提高一倍。
與其他框架一樣，Vue 使用虛擬 DOM 來渲染組件。爲了加速渲染過程，必須減少虛擬 DOM 的工作負載。3.0 通過以下這些手段來達到提速的目的：
編譯時間提示——通過徹底檢查渲染過程，Vue 3.0 將輸出更好的編譯時提示，以顯示代碼優化;
組件快速路徑——Vue 3.0 沒有檢查模板對象是否是組件，而是假設大寫的就是一個組件。這個假設避免了猜測，加快了渲染過程。
單態調用——任何上過計算機科學課的人都知道多態性的概念，但是 Vue 3.0 在渲染過程中使用了單態調用。這種微優化總是將形態相同的對象傳給渲染引擎，這使得更容易優化 Javascript 引擎。
優化 slot 生成——這個看似複雜的術語實際上可以歸結爲一個簡單的概念：確保實例會對其依賴項進行跟蹤。目前，只要父組件和子組件的依賴項被更新，兩者都會被迫重新渲染。在 3.0 中，父組件和子組件可以有不同的依賴項，並且僅在各自的依賴項發生更改時才需要更新。這大大減少了頁面重新渲染的次數。
靜態樹吊裝(static tree hoisting)——這不是新特性(Vue 2.0 中就已存在)，不過確實極大地升了工程速度。顧名思義，就是不重新渲染沒有任何依賴項的靜態元素。這大大減少了虛擬 DOM 的工作負載，並節省了大量項目開銷。
基於代理的觀察——Vue 3.0 將使用 ES2015 基於代理的觀察來跟蹤元素的反應性。這個變化不僅消除了 Vue 2.0 無法支持的幾種情況，而且帶來更好的性能。尤雨溪表示，這些優化可以使組件實例初始化速度提高一倍，內存使用量減半。
更輕量級目前，Vue 的體積已經很小了(壓縮後 20KB)。由於進行了搖樹優化(消除非重要代碼)，3.0 的預計大小約爲 10KB(壓縮後)。主要是移除了對 Vue 項目來說不是很重要的庫，可以通過 import 語句來使用它們，而不是把它們打包在主 src 代碼中。
提高可維護性從 Flow 到 TypeScript——Vue 3.0 將從 Flow 轉到 TypeScript。不過，雖然代碼庫將使用 TypeScript 重寫，但尤雨溪明確表示他們非常重視兼容性易用性，不喜歡使用 TypeScript 的用戶仍然可以使用純 JavaScript。
解耦包——與當前狀態相比，Vue 3.0 提供了更好的模塊化，從而變得更加可定製和靈活，同時還提供了透明性，開發人員可以深入到源代碼中。
編譯器重寫——這是最令我感到興奮的功能之一。這些變更不僅帶來更好的 IDE 支持，而且可以創建源碼映射，如果存在運行時錯誤，它將給出錯誤對應的文件位置和行號。如果你現在在使用 Vue，你就應該知道運行時錯誤消息對於識別問題幾乎沒有什麼幫助。這次的更新給開發者帶來了一股清新的空氣。
面向原生Vue 3.0 將與平臺無關——它將運行純 JavaScript，並且在其主構建中不會假設使用諸如 Node.js 之類的東西。這種靈活性使構建 Web、iOS 或 Android 應用程序變得更容易。面向原生使 Vue 更像是 React 的替代品。
讓開發人員更輕鬆雖然看似簡單，但我認爲這是使用 Vue 的主要優點——簡單但功能強大，這些都是好的方面。
公開 Reactivity API——新的變更允許開發人員顯式創建反應式對象和自定義重渲染 hook。3.0 還解決了 Vue 用戶經常抱怨的一個問題：什麼時候以及爲什麼要重新渲染組件?
3.0 提供了一個 renderTriggered 事件，人們可以通過它查看是什麼觸發了更新。這個出色的功能將使 Vue 更加透明。
所以呢?你可能在想，“那又怎樣?人們仍然會使用 React 或 Angular”。你或許說得沒錯。作爲當前的業界標準，React 和 Angular 可能會繼續保持最受歡迎組件框架的地位。但是，Vue 3.0 帶來的一些有趣的東西可能使它在未來幾年更具競爭力。
速度。即使是現在，Vue 就已經提供了比 React 或 Angular 更快的渲染速度。通過應用新的微優化，Vue 的渲染時間可能只有其他框架的一半。這是一個可以將一些開發人員從其他環境吸引過來的關鍵。下表顯示了 Vue 2.0 在速度和內存方面的優勢——而新版本應該會進一步加強這些優勢。
適應性。Vue 的一個設計目標就是要易於實現，無論是將其添加到現有項目中還是用它來構建 SPA，都有很多文檔和用例可幫助你定義需求。Vue 3.0 帶來的新特性(特別是反應式 hook 和新的模塊化設計)使這個靈活的框架更加強大。雖然我一直在強調 Vue 的簡單性，但它確實爲更有經驗的開發人員提供了更多方式來控制他們的項目。
文檔。不知道是不是隻有我一個人這麼想，我個人認爲，Vue 的文檔比 React 更易於理解。事實上，我甚至都不需要通過 Hello World 教程來學習 Vue，它的文檔足以讓我明白該如何用它。
難度——就像它的文檔一樣，Vue 非常上手。它不僅使用 HTML、CSS/CSS 預處理器(如 sass 和 scss)和 JavaScript，而且還爲框架提供了大量的支持和庫。對新開發人員來說非常容易上手，對高級開發人員來說非常容易擴展他們的技能。
爲了看到 Vue 3.0 將要帶來的全面影響，我們需要等到 2019 年某個時候(希望如此)。尤雨溪在多倫多 VueConf 展示的功能似乎讓 Vue 變得更加強大和高效，所以對新版本充滿期待。
鄭州×××醫院 http://mobile.zyyyzz.com/
鄭州×××醫院××× http://mobile.i0u.net/