【譯】Vue 3.0 對 Web 開發意味着什麼？

原文地址：What Does Vue 3.0 Mean for Web Development?

原文做者 : Matt Maribojoc

譯者： Aemple

新年到 Vue2.6悄然發佈🎉🎉🎉

前言

去年11月，Vue的建立者Evan You向咱們展現了Vue 3.0 —— 這是不斷上升的Javascript框架的最新版本。這些優化使Vue更高效，更模塊化且更易於使用。我將討論這些變化以及我認爲的他們將在Vue 3.0發佈後對現有開發產生的影響。

如今的Vue是怎樣的？

用他們本身的話來講，Vue是一個「用於構建用戶應用程序的漸進式框架」。它的設計很是靈活，既能夠將單個Vue庫合併到其餘項目中，也能夠徹底用VUE驅動複雜的項目。

Vue一般被視爲更易於理解和易於實現的框架之一。支持純HTML模板，而像React這樣的工具是使用Javascript定義DOM元素。

截至2019年初，咱們仍然在使用Vue 2.0。雖然與React和Angular相比，Vue仍只佔據了很小的市場份額，但Vue的受歡迎程度不斷提升。在我看來，Vue 3.0的發佈將提高其使用率，並促使其成爲其餘主要框架的替代品。

下面的圖表顯示了每一個框架在工做中的使用數量。正如你所看到的，VueJS在接近目前的行業標準以前仍然有一條很長的路要走。（資料來源：TechMagic）

Vue3.0中最明顯的變化

在他的演講中，Evan You強調了Vue 3.0中的五個關鍵變化：

一、更快

二、更小

三、更易於維護

四、更多的原生支持

五、更易於開發使用

如今讓咱們深刻探討這些。

讓速度更快

這個主題佔據了Evan You演講的大部分時間，由於它具備最大的技術變化，顯然是Vue目前的主要賣點之一。

VueJS已經以其渲染速度而聞名。在它的比較測試中，它的性能優於其餘框架。可是，對Vue2.0代碼的邊緣狀況和修復的數量使得Vue團隊決定使用微優化徹底重寫渲染代碼。據Evan You介紹，這些優化能夠在安裝和初始化速度上增長100%。

與其餘框架同樣，VueJS使用虛擬DOM來呈現其組件。爲了加速渲染過程，必須減小此虛擬DOM的工做負載。Vue3.0中包含了如下特性來知足這個目標：

編譯提示——經過檢索渲染過程，Vue 3.0將輸出更好的編譯時提示，這些提示顯示了代碼如何更好的優化。

組件快速確認——再也不經過檢查模板對象是不是組件，VUE 3.0將假設大寫標記爲一個組件。這個假設消除了猜想，加快了渲染過程。

單形調用（Monomorphic Calls）———任何上過計算機科學課程的人-他們的大腦中都有多態性的概念，可是Vue 3.0在呈現過程當中使用了單形調用。這種微優化老是將形狀相同的對象傳遞給渲染引擎，這使得Javascript引擎更容易優化。下圖來自：Evan You對Vue 3.0的演講

優化插槽———這個看似複雜的術語實際上歸結爲一個簡單的概念：確保使用它們的實例跟蹤依賴關係。目前，每當父組件和子組件具備更新的依賴項時，都將被迫從新呈現。可是，在3.0中，父級和子級將有不一樣的依賴項，而且只有當它們各自的依賴項發生變化時纔會更新。這大大減小了頁面上發生的重呈現次數。

靜態樹提高———雖然這不算Vue3.0的更新(它已經存在於VUE 2.0中)，靜態樹的提高極大地提升了項目速度。提高的意思是不會從新呈現沒有任何依賴項的靜態元素.這大大減小了虛擬DOM的工做，並節省了許多項目開銷。

Proxy Based Observations ——Vue 3.0將使用ES2015基於proxy-based observations來跟蹤元素的變化。這哥改變不只消除了Vue 2.0沒法支持的幾種狀況，並且還能夠更好地執行。根據You的演講，這些優化可使組件實例初始化速度比如今的1vue2.0版本提升100％。

基於Proxy實現比基於Observations的實現快兩倍，內存的使用量也僅僅是Vue 2.0中Observations實現的一半。

更輕量級

目前，VueJS已經很小了（20 kb Gzip）。然而在Vue3.0中因爲tree shaking（消除非重要代碼）3.0的估計大小大約是10 kb Gzip。 這是經過刪除全部對VUE項目非必需的庫，並經過import語句(而不是在主src中打包)使用它們。

提升可維護性

Flow 到 TypeScript ———爲了讓更多用戶更容易訪問，Vue 3.0將從Flow轉換爲TypeScript。雖然代碼庫將被重寫爲使用Typescript，可是然兼容javascript寫法。

更加模塊化———與目前的Vue相比，VUE 3.0是將更加模塊化，它依賴於本身的內部包來運行。這使得它具備可定製性和靈活性，同時也使它具備透明度，從而使開發人員可以真正進入源代碼。

編譯器重寫———這是我最感興趣的特性之一。這些更改不只能夠有更好的IDE支持，並且如今它建立了源映射，這意味着當出現運行時錯誤時，它將給出錯誤的文件位置和行號。若是您如今在使用Vue，您就會知道如今的運行時錯誤消息對識別問題並無多大幫助。這個更新應該足以讓開發者們心情大好。

更容易定位於Native

3.0將是與平臺無關的———這意味着它將運行純Javascript，而且不會在其主構建中使用諸如Node.js之類的Web特性。這使得爲Web，iOS或Android構建應用程序變得更加容易。經過定位於Native，Vue使本身更像是React的替代品，它對iOS和Android項目提供了大量支持。

使開發人員的生活更輕鬆

雖然看似簡單，但我認爲這是使用VueJS的主要緣由 - 它簡單但功能強大。這些都是突出的方面。

公開Reactivity API———公開後，新的更改將使得開發人員具備顯式建立反應性對象的能力。以及建立自定義從新渲染鉤子。3.0還解決了VueJS用戶的常見抱怨：什麼時候以及爲何個人組件從新渲染？

如今有一個renderTrigged事件，它容許人們看到是什麼觸發了更新。一個神奇的功能，將使VueJS更加透明。

So What?

你可能在想，「那又怎樣？人們仍然會使用React 或者 Angular。你也許是對的。 做爲當前的行業標準，Reaction和Angular極可能仍然是組件框架中最受歡迎的選擇。然而，在Vue 3.0中有一些有趣的東西能夠討論，這可能會使它在將來幾年成爲一種更具競爭力的選擇。

速度 即便是如今，VueJS提供比React或Angular更快的渲染時間。經過Evan You討論的微優化，Vue可能擁有其餘框架的一半渲染時間。這是一個關鍵點，能夠吸引一些開發人員遠離其餘環境。下表顯示了Vue 2.0已經具備的速度和內存優點 - 新的更新應該進一步提升這些優點。

適應性 VueJS旨在易於實施。不管您是要將其添加到現有項目仍是使用它來爲SPA提供支持，都有大量文檔和用例可幫助您定義需求。在Vue 3.0中所作的更改，特別是 reactivity hooks和新的模塊化設計，使這個已經靈活的語言更增強大。雖然我將繼續強調VueJS的簡單性，但有許多功能容許更多技術和經驗豐富的開發人員徹底控制他們的項目。雖然我將繼續強調VueJS的簡單性，可是有許多特性容許更多的技術人員和經驗豐富的開發人員徹底控制他們的項目。

文檔 這多是「個人問題」，但我我的確實認爲Vue的文檔比React更易於理解。事實上，我甚至歷來沒有完成過HelloWorld教程或任何關於Vue的內容。文檔足以讓我理解使用案例並開始使用。你能夠本身看看Vue 官方文檔。

難度 就像我在談論文檔同樣 - Vue很是平易近人。它不只使用天然HTML，CSS / CSS預處理器（如sass和scss）和Javascript，並且還爲相對較新的框架提供了大量的支持和庫。對於新開發人員而言，這是很是容易理解的，而且對於高級開發人員來講很是容易擴展。

爲了看到Vue 3.0的所有影響，咱們將不得不等到2019年某個時候（但願如此）。 Evan You在多倫多VueConf展現的功能彷佛使Vue更增強大和高效，所以我對新版本寄予厚望。你對Vue 3.0和新的React、Angular有什麼見解呢？