還學的動嗎？ 盤點下Vue.js 3.0.0 那些讓人激動的功能
轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://blog.bitsrc.io/vuejs-3-0-0-beta-features-im-excited-about-c70b82fac163
路漫漫其修遠兮，吾將上下而求索。——獻給所有為 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的功能說明，是否有你喜歡的內容呢？