去年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變得更加強大和高效，所以對新版本充滿期待。
英文原文：https://medium.com/@mattmaribojoc/what-does-vue-3-0-mean-for-web-development-851052fc0138
更多內容，請關注前端之巔。
