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

轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

原文出處：//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的功能說明，是否有你喜歡的內容呢？

　　

　　

 

 

 

Tags:

VirMach 便宜 VPS

QNews

QNews