還學的動嗎？ 盤點下Vue.js 3.0.0 那些讓人激動的功能

路漫漫其修遠兮，吾將上下而求索。——獻給全部爲 Vue的發展而默默付出的開發者們。

(圖片來源於網絡)

前幾天，Vue正式進入了beta階段，做爲一個日漸流行的JavaScript庫，Vue.js由Evan You和Vue社區的284多名成員建立。現在，它已擁有超過120萬用戶，併成爲用來解決大型單頁web應用程序的有效手段。

(圖片來源於網絡)

在撰寫本文時，Vue.js 3.0.0已經對外發布了Beta版，其中最重要的變化是受React Hooks的啓發，在新的API中容許使用基於函數的方式編寫組件。

(圖片來源於網絡)

如下是Vue.js 3.0.0 中的新功能：

· 容許使用基於函數的方式編寫組件

· 虛擬DOM重寫可提升性能並改善TypeScript支持

· 原生門戶

· Fragments 片斷（不會在DOM樹中渲染的虛擬元素）

· 全局mounting

· 有條件地暫停組件渲染

咱們將從性能、代碼優化（Tree-shaking）、函數式API（Composition API）等方面，盤點 Vue.js 3.0.0 中那些讓人激動的功能。

性能

Vue.js的發展，向來都是以提升開發與構建的速度爲驅動，對比3.0和此前的Vue版本，這一點尤其明顯。因爲虛擬DOM已被徹底重寫，所以這個新版本將比以往更快。

對於服務器端渲染，Vue.js 3.0.0的性能提升了2倍，速度提升了3倍。同時，組件的初始化如今也更加高效，甚至具備了編譯器通知的快速執行路徑。

代碼優化（Tree-shaking）

在Vue.js 3.0.0中，提供了「搖樹」支持，即經過"搖"咱們的JS文件，將其中用不到的代碼"搖"掉。

(圖片來源於網絡)

具體來講，在 webpack 項目中，有一個入口文件，至關於一棵樹的主幹，入口文件有不少依賴的模塊，至關於樹枝。在實際狀況中，雖然依賴了某個模塊，但其實只使用其中的某些功能。經過 tree-shaking，即可將沒有使用的模塊搖掉，這樣來達到代碼優化的目的。

如今，Vue中可選的大多數功能都支持「搖樹」，例如過渡和v模型。這極大地減少了Vue應用程序的大小，例如一個標準HelloWorld系統如今的文件大小僅爲13.5kb（經過使用composition API，它的大小甚至能夠降到11.75kb）。

「搖樹」的出現，容許一個包括了全部運行時功能的項目大小可縮至22.5kb。這意味着即便增長了更多功能，Vue 3.0.0仍然比任何2.x版本都輕盈。

Composition API

Composition API 是一種全新的邏輯重用和代碼組織方法。

Vue團隊主要對當前的Composition API進行了添加和改進，而不是進行重大更新，這讓已經熟悉了Vue2語法的人能夠更容易上手。

此前，咱們常用「options」API （如data、methods、computed等屬性）來構建組件，目的就是爲了將邏輯添加到Vue組件中。這種方法最大的缺點是：它自己並非一個標準的JavaScript代碼。所以，您須要確切地知道模板中能夠訪問哪些屬性以及this關鍵字的行爲。在底層，Vue編譯器須要將此屬性轉換爲標準代碼。正由於如此，咱們沒法從自動建議或類型檢查中獲益。

因此，Vue團隊推出了composition API來解決這些問題，它具有了在Vue組件中使用和重用純JS函數的靈活性和自由度。

composition API以下所示：

<script>
export default {
         setup() {
           return {
             average(), range(), median()
           }
         }
       } function average() { } 
function range() { } 
function median() { }
</script>

使用composition API並不意味着不能使用「options」API。相反，咱們能夠將 composition API與options API一塊兒使用。（就像在React的鉤子中那樣）

Fragments

Vue JS將在 3.0.0版本中引入相似React Fragments的功能，該功能的主要需求是由於在以前的版本中Vue模板只能擁有一個根節點，所以，當建立相似像下面這樣的組件時，將返回錯誤：

<template>
<div>Root1</div>
<div>Root2</div>
</template>

任何Vue組件都須要綁定在單個根節點中，在3.0中將內置容許模板組件擁有多個根節點功能，這一點和React的功能相似。

Teleport

Teleport（之前稱爲Portal）是將子節點渲染到DOM譜系以外的DOM節點中的安全通道，例如彈出窗口甚至是模式。在此以前，使用CSS一般會遇到不少麻煩，如今Vue容許您使用<Teleport>在模板部分中進行處理。我相信Teleport受到React門戶的啓發，並將隨Vue JS的3.0.0版本一塊兒提供。

Suspense

Suspense的提供可讓咱們在應用延遲加載一些內容的同時，使加載過程可視化，這個過程能夠是一個加載動畫或是一個佔位符，這樣無疑會使用戶體驗更流暢，也會讓程序的性能從感知層面上有一些提高。

更好的TypeScript支持

Vue 3.0版本已經使用了TypeScript重寫，對於終端用戶來說，不論用戶使用的是TS仍是JS，都會得到更好的編程體驗，包括靜態檢查等。即便你用的是JS，你仍然能夠獲得參數的提示、類型聲明，甚至能夠跳進類型聲明中去看源碼， TS與JS在代碼和API之間沒有太大區別。而且，目前若是你喜歡使用Class組件，它仍受支持。

當前Vue 3.0.0的版本狀態

根據GitHub上該項目的發佈計劃，Vue 3.0.0版的正式發佈計劃定於2020年第一季度。目前來看進度是有一些延遲。但Vue 3.0.0正式beta測試仍然按計劃啓動了，這意味着日程中全部請求都已經處理和完成。

如今團隊的重點是文檔和升級指南的建立，另外Router和Vuex還有一些兼容性的改動，最後可能會還有一些實驗性的小工具，例如：Vite，它是一個支持熱更新的web服務器，實際用起來仍是挺有意思的。

2.x系列會有最後一次小版本更新

做爲多是Vue 3.x版本正式發行以前的2.x系列的最後一個小版本更新。它將從3.0.0版本向後移植兼容，並加上在3.0.0刪除的功能顯示相應的棄用警告。

最後

根據已經過的測試來講明這個版本是市場上最快的前端框架。你能夠在此處查看此次直播的ppt，以上爲此次Vue 3.0.0 Beta的功能說明，是否有你喜歡的內容呢？

---

本文是由葡萄城技術開發團隊發佈，轉載請註明出處：葡萄城官網
如需瞭解全面兼容 Vue 的純前端表格控件，請前往 SpreadJS 官網