為什么我推薦 Web開(kāi)發(fā)切到 Vue 3.0 ？

點(diǎn)擊“開(kāi)發(fā)者技術(shù)前線(xiàn)”，選擇“星標(biāo)??”

讓一部分開(kāi)發(fā)者看到未來(lái)

Vue 是“一個(gè)用于構(gòu)建用戶(hù)應(yīng)用程序的漸進(jìn)式框架”。它的設(shè)計(jì)非常靈活，可以將單個(gè) Vue 庫(kù)集成到其他項(xiàng)目中，也可以完全使用 Vue 構(gòu)建復(fù)雜的項(xiàng)目。

Vue 通常被視為一個(gè)易于理解和實(shí)現(xiàn)的框架，它支持純 HTML 模板，而 React 需要使用 JavaScript 定義來(lái) DOM 元素。

截至 2019 年初，我們?nèi)匀辉谑褂?Vue 2.0。盡管與 React 和 Angular 相比，Vue 目前只占據(jù)了很小的市場(chǎng)份額，但 Vue 的受歡迎程度卻在不斷提升。在我看來(lái)，Vue 3.0 的發(fā)布將會(huì)提升它的采用率，并讓自己成為其他主要框架的替代品。

下圖顯示了每個(gè)框架對(duì)應(yīng)的工作崗位數(shù)量?？梢?jiàn)，Vue 在接近當(dāng)前行業(yè)標(biāo)準(zhǔn)之前還有很長(zhǎng)的路要走。

尤雨溪在主題演講中強(qiáng)調(diào)了 Vue 3.0 的五個(gè)關(guān)鍵變化：

1. 速度

2. 體積

3. 可維護(hù)性

4. 面向原生

5. 易用性

現(xiàn)在讓我們來(lái)深入探討這些變化。

這個(gè)額主題占據(jù)了演講的大部分內(nèi)容，因?yàn)樗w現(xiàn)了最重大的技術(shù)變化，是 Vue 目前的主要賣(mài)點(diǎn)之一。

Vue 以其渲染速度而聞名。在比較測(cè)試中，它的性能優(yōu)于其他框架。不過(guò)，面對(duì) 2.0 中對(duì)代碼所做的修復(fù)，Vue 團(tuán)隊(duì)決定使用微優(yōu)化方法完全重寫(xiě)渲染代碼。尤雨溪表示，這些優(yōu)化可以使掛載和初始化速度提高一倍。

與其他框架一樣，Vue 使用虛擬 DOM 來(lái)渲染組件。為了加速渲染過(guò)程，必須減少虛擬 DOM 的工作負(fù)載。3.0 通過(guò)以下這些手段來(lái)達(dá)到提速的目的：

編譯時(shí)間提示——通過(guò)徹底檢查渲染過(guò)程，Vue 3.0 將輸出更好的編譯時(shí)提示，以顯示代碼優(yōu)化；

組件快速路徑——Vue 3.0 沒(méi)有檢查模板對(duì)象是否是組件，而是假設(shè)大寫(xiě)的就是一個(gè)組件。這個(gè)假設(shè)避免了猜測(cè)，加快了渲染過(guò)程。

單態(tài)調(diào)用——任何上過(guò)計(jì)算機(jī)科學(xué)課的人都知道多態(tài)性的概念，但是 Vue 3.0 在渲染過(guò)程中使用了單態(tài)調(diào)用。這種微優(yōu)化總是將形態(tài)相同的對(duì)象傳給渲染引擎，這使得更容易優(yōu)化 Javascript 引擎。

優(yōu)化 slot 生成——這個(gè)看似復(fù)雜的術(shù)語(yǔ)實(shí)際上可以歸結(jié)為一個(gè)簡(jiǎn)單的概念：確保實(shí)例會(huì)對(duì)其依賴(lài)項(xiàng)進(jìn)行跟蹤。目前，只要父組件和子組件的依賴(lài)項(xiàng)被更新，兩者都會(huì)被迫重新渲染。在 3.0 中，父組件和子組件可以有不同的依賴(lài)項(xiàng)，并且僅在各自的依賴(lài)項(xiàng)發(fā)生更改時(shí)才需要更新。這大大減少了頁(yè)面重新渲染的次數(shù)。

靜態(tài)樹(shù)吊裝（static tree hoisting）——這不是新特性（Vue 2.0 中就已存在），不過(guò)確實(shí)極大地升了工程速度。顧名思義，就是不重新渲染沒(méi)有任何依賴(lài)項(xiàng)的靜態(tài)元素。這大大減少了虛擬 DOM 的工作負(fù)載，并節(jié)省了大量項(xiàng)目開(kāi)銷(xiāo)。

基于代理的觀(guān)察——Vue 3.0 將使用 ES2015 基于代理的觀(guān)察來(lái)跟蹤元素的反應(yīng)性。這個(gè)變化不僅消除了 Vue 2.0 無(wú)法支持的幾種情況，而且?guī)?lái)更好的性能。尤雨溪表示，這些優(yōu)化可以使組件實(shí)例初始化速度提高一倍，內(nèi)存使用量減半。

目前，Vue 的體積已經(jīng)很小了（壓縮后 20KB）。由于進(jìn)行了搖樹(shù)優(yōu)化（消除非重要代碼），3.0 的預(yù)計(jì)大小約為 10KB（壓縮后）。主要是移除了對(duì) Vue 項(xiàng)目來(lái)說(shuō)不是很重要的庫(kù)，可以通過(guò) import 語(yǔ)句來(lái)使用它們，而不是把它們打包在主 src 代碼中。

從 Flow 到 TypeScript——Vue 3.0 將從 Flow 轉(zhuǎn)到 TypeScript。不過(guò)，雖然代碼庫(kù)將使用 TypeScript 重寫(xiě)，但尤雨溪明確表示他們非常重視兼容性易用性，不喜歡使用 TypeScript 的用戶(hù)仍然可以使用純 JavaScript。

解耦包——與當(dāng)前狀態(tài)相比，Vue 3.0 提供了更好的模塊化，從而變得更加可定制和靈活，同時(shí)還提供了透明性，開(kāi)發(fā)人員可以深入到源代碼中。

編譯器重寫(xiě)——這是最令我感到興奮的功能之一。這些變更不僅帶來(lái)更好的 IDE 支持，而且可以創(chuàng)建源碼映射，如果存在運(yùn)行時(shí)錯(cuò)誤，它將給出錯(cuò)誤對(duì)應(yīng)的文件位置和行號(hào)。如果你現(xiàn)在在使用 Vue，你就應(yīng)該知道運(yùn)行時(shí)錯(cuò)誤消息對(duì)于識(shí)別問(wèn)題幾乎沒(méi)有什么幫助。這次的更新給開(kāi)發(fā)者帶來(lái)了一股清新的空氣。

Vue 3.0 將與平臺(tái)無(wú)關(guān)——它將運(yùn)行純 JavaScript，并且在其主構(gòu)建中不會(huì)假設(shè)使用諸如 Node.js 之類(lèi)的東西。這種靈活性使構(gòu)建 Web、iOS 或 Android 應(yīng)用程序變得更容易。面向原生使 Vue 更像是 React 的替代品。

雖然看似簡(jiǎn)單，但我認(rèn)為這是使用 Vue 的主要優(yōu)點(diǎn)——簡(jiǎn)單但功能強(qiáng)大，這些都是好的方面。

公開(kāi) Reactivity API——新的變更允許開(kāi)發(fā)人員顯式創(chuàng)建反應(yīng)式對(duì)象和自定義重渲染 hook。3.0 還解決了 Vue 用戶(hù)經(jīng)常抱怨的一個(gè)問(wèn)題：什么時(shí)候以及為什么要重新渲染組件？

3.0 提供了一個(gè) renderTriggered 事件，人們可以通過(guò)它查看是什么觸發(fā)了更新。這個(gè)出色的功能將使 Vue 更加透明。

你可能在想，“那又怎樣？人們?nèi)匀粫?huì)使用 React 或 Angular”。你或許說(shuō)得沒(méi)錯(cuò)。作為當(dāng)前的業(yè)界標(biāo)準(zhǔn)，React 和 Angular 可能會(huì)繼續(xù)保持最受歡迎組件框架的地位。但是，Vue 3.0 帶來(lái)的一些有趣的東西可能使它在未來(lái)幾年更具競(jìng)爭(zhēng)力。

速度。即使是現(xiàn)在，Vue 就已經(jīng)提供了比 React 或 Angular 更快的渲染速度。通過(guò)應(yīng)用新的微優(yōu)化，Vue 的渲染時(shí)間可能只有其他框架的一半。這是一個(gè)可以將一些開(kāi)發(fā)人員從其他環(huán)境吸引過(guò)來(lái)的關(guān)鍵。下表顯示了 Vue 2.0 在速度和內(nèi)存方面的優(yōu)勢(shì)——而新版本應(yīng)該會(huì)進(jìn)一步加強(qiáng)這些優(yōu)勢(shì)。

適應(yīng)性。Vue 的一個(gè)設(shè)計(jì)目標(biāo)就是要易于實(shí)現(xiàn)，無(wú)論是將其添加到現(xiàn)有項(xiàng)目中還是用它來(lái)構(gòu)建 SPA，都有很多文檔和用例可幫助你定義需求。Vue 3.0 帶來(lái)的新特性（特別是反應(yīng)式 hook 和新的模塊化設(shè)計(jì)）使這個(gè)靈活的框架更加強(qiáng)大。雖然我一直在強(qiáng)調(diào) Vue 的簡(jiǎn)單性，但它確實(shí)為更有經(jīng)驗(yàn)的開(kāi)發(fā)人員提供了更多方式來(lái)控制他們的項(xiàng)目。

文檔。不知道是不是只有我一個(gè)人這么想，我個(gè)人認(rèn)為，Vue 的文檔比 React 更易于理解。事實(shí)上，我甚至都不需要通過(guò) Hello World 教程來(lái)學(xué)習(xí) Vue，它的文檔足以讓我明白該如何用它。

難度——就像它的文檔一樣，Vue 非常上手。它不僅使用 HTML、CSS/CSS 預(yù)處理器（如 sass 和 scss）和 JavaScript，而且還為框架提供了大量的支持和庫(kù)。對(duì)新開(kāi)發(fā)人員來(lái)說(shuō)非常容易上手，對(duì)高級(jí)開(kāi)發(fā)人員來(lái)說(shuō)非常容易擴(kuò)展他們的技能。

為了看到 Vue 3.0 將要帶來(lái)的全面影響，我們需要等到 2019 年某個(gè)時(shí)候（希望如此）。尤雨溪在多倫多 VueConf 展示的功能似乎讓 Vue 變得更加強(qiáng)大和高效，所以對(duì)新版本充滿(mǎn)期待。

英文原文：

https://medium.com/@mattmaribojoc/what-does-vue-3-0-mean-for-web-development-851052fc0138