[[348895]]

本文已經作者 Matt Maribojoc 授權翻譯!

Vue 是目前前沿開發中最熱門的框架之一，到2019年每周的下載率翻了一番。2020 年初 Vue3的發布還會增加它的受歡迎程度。

Vue3 為開發人員提供了更多的控制，它使我們能夠精確地控制項目中發生的事情，從編寫定制的編譯和渲染方法到直 Vue reactivity API。

Vue3 使用 Proxy 來監聽數據的變化

響應性是 VueJS 的核心，數據必須具有依賴性，可以觀察并進行更新以響應任何更改，Vue2 使用 Object.defineProperty 創建 getter 和 setter 來實現響應式。

使用Object.defineProperty有兩個主要問題，在官方文檔中都提到過：Vue 不能檢測數組和對象的變化。

對于對象

Vue 無法檢測 property 的添加或移除。由于 Vue 會在初始化實例時對 property 執行 getter/setter 轉化，所以 property 必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的。

對于數組

Vue 不能檢測以下數組的變動：

1. 當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

舉個例子：

var vm = new Vue({ 
  data: { 
    items: ['a', 'b', 'c'] 
  } 
}) 
vm.items[1] = 'x' // 不是響應性的 
vm.items.length = 2 // 不是響應性的 

為什么使用 Proxy ?

Vue3 的解決方案是使用基于Proxy的觀察者模式來解決 Vue2 響應上的一些限制。

新舊系統之間的主要區別在于，在Vue2中，Object.defineProperty會修改原始數據，而Proxy則不會，Proxy 虛擬化目標數據并設置不同的處理程序(稱為target)，這些處理程序通過getters和setter攔截數據。

Vue3 意味著我們無需使用vm.$set來讓數據動態的響應，同時也解決 vue2 操作數組無法響應的問題。

正如尤雨溪大哥所總結的那樣，基于代理可以支持：

• 檢測屬性 添加/刪除
• 檢測數組 index/length 的變化
• 支持Map，Set, WeakMap 和WeakSet

Composition API

這是到目前為止 Vue3 最大的一個變化，它有助于代碼的組織和重用性。

目前，在Vue中我們使用是Options API。Options API按屬性組織代碼：data，computed，methods等。

這是一個非常直觀的方式，但維護一些復雜組件變得非常困難。單個功能的代碼通常在相隔數百行的多個地方拋出。

可維護性和可讀性成為主要問題。

接著，我們快速了解一下Composition API的工作原理。

import { reactive, computed } from 'vue' 
 
export default { 
  setup() { 
    let state = reactive({ 
      input: '', 
      groceries: [], 
      groceriesLeft: computed(() => { groceries.length }) 
    }) 
 
    function addGrocery() { 
      state.groceries.push(state.input) 
   state.input = '' 
    } 
 
    function deleteGrocery(index) { 
   state.groceries.splice(index, 1); 
  } 
  return {  
   state,  
   addGrocery,  
   deleteGrocery  
  } 
  } 
} 

我們來分析一下，上面的過程 ??

import { reactive, computed } from 'vue' 

Vue Composition API公開了Vue中的許多核心功能，比如reactive和組件方法，所以，我們需要導入它們。

export default { 
   setup() { 

setup()方法的引入是 Vue3 中最大的變化之一。從本質上講，它使我們能夠確定傳遞回模板的內容，無論返回什么，都可以在模板中訪問。

我們可以在 setup 里面設置reactive 數據，生命周期，計算屬性，定義的方法并返回我們想要的任何東西。

let state = reactive({ 
  input: '', 
  groceries: [], 
  groceriesLeft: computed(() => { groceries.length }) 
}) 

通過以反應式方法包裝所有這些數據，所有數據在內部都將變為反應式。此狀態模式來自Composition API文檔。

reactive() 函數接收一個對象作為參數，并返回一個代理對象，所有數據在內部都將變為響應式的。

需要注意的一點是我們聲明groceriesLeft變量的方式。它是一個計算的屬性，并在setup()方法中定義，不再單獨拎出來聲明。

function addGrocery() { 
  state.groceries.push(state.input) 
  state.input = '' 
} 
 
function deleteGrocery(index) { 
  state.groceries.splice(index, 1) 
} 

函數聲明倒是沒啥變化，區別一點是由于所有響應數據都存儲在state 對象中，因此我們必須使用狀態對象進行訪問，但這不是Vue3特有的。

return {  
  state,  
  addGrocery,  
  deleteGrocery  
} 

最后，我們想從setup()方法返回這些函數，這樣聲明的數據和方法就可在模板內部訪問。

初次引入此方法時，Vue 社區中存在許多反對，因為開發者不希望被迫編寫這種新的方式。但是，這個也可選的，就是說我們仍然可以使用 vue2 方式來做。

現在可以在Vue中使用 Suspense

Suspense是React的一個功能，現已在Vue3中引入。Suspense 讓組件“等待”某個異步操作，直到該異步操作結束即可渲染。

當我們想要異步加載setup()方法中的內容時，這很有用。簡而言之，只需知道 setup 方法可以像其他方法一樣被設置為異步的。

如果我們要在等待組件獲取數據并解析時顯示“正在拼了命的加載…”之類的內容，則只需三個步驟即可實現Suspense。

• 將異步組件包裝在標記中
• 在我們的 Async 組件的旁邊添加一個兄弟姐妹，標簽為。
• 將兩個組件都包裝在組件中

使用插槽，Suspense 將渲染后備內容，直到默認內容準備就緒。然后，它將自動切換以顯示我們的異步組件。

<Suspense>  
  <template #default>  
    <article-info/>  
  </template>  
  <template #fallback>  
    <div>正在拼了命的加載…</div>  
  </template>  
</Suspense>  

Fragment

在Vue 3中，我們可以期待的另一個令人興奮的補充是Fragment。你可能會問，什么是碎片?如果你創建一個Vue組件，那么它只能有一個根節點。這意味著不能創建這樣的組件

<template> 
  <div>Hello</div> 
  <div>World</div> 
</template> 

原因是代表任何Vue組件的Vue實例需要綁定到一個單一的DOM元素中。唯一可以創建一個具有多個DOM節點的組件的方法就是創建一個沒有底層Vue實例的功能組件。

結果發現React社區也遇到了同樣的問題。他們想出的解決方案是一個名為 Fragment 的虛擬元素。它看起來差不多是這樣的：

class Columns extends React.Component { 
  render() { 
    return ( 
      <React.Fragment> 
        <td>Hello</td> 
        <td>World</td> 
      </React.Fragment> 
    ); 
  } 
} 

盡管Fragment看起來像一個普通的DOM元素，但它是虛擬的，根本不會在DOM樹中呈現。這樣我們可以將組件功能綁定到一個單一的元素中，而不需要創建一個多余的DOM節點。

目前你可以在Vue 2中使用vue-fragments庫來使用Fragments，而在Vue 3中，你將會在開箱即用!

Portals

Portals是一種特殊的組件，目的是在當前組件之外渲染某些內容。這也是React中原生實現的功能之一。下面是 React 文檔中關于portals的說法。

Portals 提供了一種第一流的方式，可以將子節點渲染到父組件的DOM層次結構之外的DOM節點中。

這是一種非常好的處理modals、彈出窗口和一般要出現在頁面頂部的組件的方式。通過使用portals，你可以確保沒有任何一個主組件的CSS規則會影響到你想要顯示的組件，并且免除了你用z-index做討厭的黑客的麻煩。

下面是Portal-Vue文檔中的示例屏幕截圖和代碼。

對于每一個Portals，我們需要指定它的目標目的地，在那里，Portals內容將被渲染。

<template> 
  <div> 
    <div> 
      <p> 
        The content below this paragraph is 
        rendered in the right/bottom (red) container by PortalVue 
      </p> 
      <Portal to="right-basic"> 
        <p class="red"> 
          This is content from the left/top container (green). 
          The cool part is, it works across components, 
          so you can send your content anywhere! 
        </p> 
      </Portal> 
    </div> 
    <PortalTarget name="right-basic"></PortalTarget> 
  </div> 
</template> 

Vue3 優化了渲染

內部測試表明，Vue3中的模板樣式比Vue2快約120%。

有兩個關鍵的優化提高Vue3渲染速度：

1. Block Tree 優化
2. 提升靜態節點樹

我們進一步詳細介紹一下。

Block Tree 優化

使用虛擬DOM有一個瓶頸，因為每個組件都必須跟蹤其依賴關系。監聽這些依賴關系速度會變慢很多，因為它遞歸地檢查整個元素樹。

Vue團隊注意到的一件事是，在組件中，節點的大部分結構都是靜態的。而且，如果某個節實際上是動態的(由于v-if或v-for指令)，則其中的許多內容都是靜態的。

使用此想法，Vue3將模板分為靜態部分與動態部分。現在，渲染器知道哪些節點是動態的，它不會浪費時間檢查靜態節點的變化。

這大大減少了需要被動監視的元素數量。

結合所有這些節點可創建一個Block Tree或一個基于指令(v-if，v-for)分為節點塊的模板。

在 Block Tree 中，每個節點具有：

• 完全靜態的節點結構
• 不需要監聽的靜態內容
• 可以存儲在數組中的動態節點

這消除了對每個元素進行遞歸檢查的需要，從而大大改善了運行時間。

靜態樹提升(Static Tree Hoisting)

使用靜態樹提升，這意味著 Vue 3 的編譯器將能夠檢測到什么是靜態的，然后將其提升，從而降低了渲染成本。它將能夠跳過 patching 整棵樹。

這大大減少了虛擬DOM的工作，并節省了大型項目開銷，主要是垃圾收集。

支持 Typescript

另一個變化是Vue代碼庫將使用Typescript重寫，這個對于前端來說，又得去學習 TS 才能更好的上手 Vue3。

所以 Vue 也提供了兩種選擇給我:如果你想要Typescript，那就用。如果不想，那就用 Vue2 的方式。

Typescript 規范了 JS 變量中類型信息。多長遠來看，這有助于我們對項目的維護。

超輕量級

目前，VueJS已經很小(20kb gzip壓縮)。但是，Vue 團隊面臨一個問題:新特性增加了每個用戶的捆綁包大小，不管他們是否使用它。

為了解決這個問題，Vue3 更加徹底的模塊化。這樣做增加需要開發的導入模塊數量，但可確保我們項目中引入未使用的庫。

由于 tree shaking ，Vue 3 的估計大小大約壓縮了10 kb。當然，許多庫都需要被導入。

準備好了嗎

如果你是 Vue 的使用者，那么很明顯，Vue3 中的更新將使它變得更加實用且功能強大。

從渲染優化到幫助開發人員編寫更具可讀性/可維護性的代碼，Vue3改善Vue2遇到的許多痛點。

Vue3 已經正式發布了，你準備好了嗎，快來上手學習吧!

作者：Matt Maribojoc 譯者：前端小智 來源：medium

原文：https://medium.com/swlh/what-you-need-to-know-about-vue3-in-2020-b36a2feb5dad

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。