【譯】Vue 3.0 對 Web 開發意味著什麼?

Aemple發表於2019-02-12

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

原文作者 : Matt Maribojoc

譯者: Aemple

【譯】Vue 3.0 對 Web 開發意味著什麼?

新年到 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

【譯】Vue 3.0 對 Web 開發意味著什麼?

Vue3.0中最明顯的變化

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

1、更快

2、更小

3、更易於維護

4、更多的原生支援

5、更易於開發使用

現在讓我們深入探討這些。

讓速度更快

這個主題佔據了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的演講

【譯】Vue 3.0 對 Web 開發意味著什麼?

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

【譯】Vue 3.0 對 Web 開發意味著什麼?

靜態樹提升———雖然這不算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實現的一半。

【譯】Vue 3.0 對 Web 開發意味著什麼?

更輕量級

目前,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,您就會知道現在的執行時錯誤訊息對識別問題並沒有多大幫助。這個更新應該足以讓開發者們心情大好。

【譯】Vue 3.0 對 Web 開發意味著什麼?

更容易定位於Native

3.0將是與平臺無關的———這意味著它將執行純Javascript,並且不會在其主構建中使用諸如Node.js之類的Web特性。這使得為Web,iOS或Android構建應用程式變得更加容易。通過定位於Native,Vue使自己更像是React的替代品,它對iOS和Android專案提供了大量支援。

使開發人員的生活更輕鬆

雖然看似簡單,但我認為這是使用VueJS的主要原因 - 它簡單但功能強大。這些都是突出的方面。

公開Reactivity API———公開後,新的更改將使得開發人員具有顯式建立反應性物件的能力。以及建立自定義重新渲染鉤子。3.0還解決了VueJS使用者的常見抱怨:何時以及為什麼我的元件重新渲染?

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

【譯】Vue 3.0 對 Web 開發意味著什麼?

So What?

你可能在想,“那又怎樣?人們仍然會使用React 或者 Angular。你也許是對的。 作為當前的行業標準,Reaction和Angular很可能仍然是元件框架中最受歡迎的選擇。然而,在Vue 3.0中有一些有趣的東西可以討論,這可能會使它在未來幾年成為一種更具競爭力的選擇。

速度 即使是現在,VueJS提供比React或Angular更快的渲染時間。通過Evan You討論的微優化,Vue可能擁有其他框架的一半渲染時間。這是一個關鍵點,可以吸引一些開發人員遠離其他環境。下表顯示了Vue 2.0已經具有的速度和記憶體優勢 - 新的更新應該進一步提高這些優勢。

【譯】Vue 3.0 對 Web 開發意味著什麼?

適應性 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有什麼看法呢?

相關文章