[[348895]]

本文已經(jīng)作者 Matt Maribojoc 授權(quán)翻譯!

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

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

Vue3 使用 Proxy 來監(jiān)聽數(shù)據(jù)的變化

響應(yīng)性是 VueJS 的核心，數(shù)據(jù)必須具有依賴性，可以觀察并進行更新以響應(yīng)任何更改，Vue2 使用 Object.defineProperty 創(chuàng)建 getter 和 setter 來實現(xiàn)響應(yīng)式。

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

對于對象

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

對于數(shù)組

Vue 不能檢測以下數(shù)組的變動：

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

舉個例子：

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

為什么使用 Proxy ?

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

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

Vue3 意味著我們無需使用vm.$set來讓數(shù)據(jù)動態(tài)的響應(yīng)，同時也解決 vue2 操作數(shù)組無法響應(yīng)的問題。

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

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

Composition API

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

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

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

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

接著，我們快速了解一下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和組件方法，所以，我們需要導(dǎo)入它們。

export default { 
   setup() { 

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

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

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

通過以反應(yīng)式方法包裝所有這些數(shù)據(jù)，所有數(shù)據(jù)在內(nèi)部都將變?yōu)榉磻?yīng)式。此狀態(tài)模式來自Composition API文檔。

reactive() 函數(shù)接收一個對象作為參數(shù)，并返回一個代理對象，所有數(shù)據(jù)在內(nèi)部都將變?yōu)轫憫?yīng)式的。

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

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

函數(shù)聲明倒是沒啥變化，區(qū)別一點是由于所有響應(yīng)數(shù)據(jù)都存儲在state 對象中，因此我們必須使用狀態(tài)對象進行訪問，但這不是Vue3特有的。

return {  
  state,  
  addGrocery,  
  deleteGrocery  
} 

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

初次引入此方法時，Vue 社區(qū)中存在許多反對，因為開發(fā)者不希望被迫編寫這種新的方式。但是，這個也可選的，就是說我們?nèi)匀豢梢允褂?vue2 方式來做。

現(xiàn)在可以在Vue中使用 Suspense

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

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

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

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

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

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

Fragment

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

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

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

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

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

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

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

Portals

Portals是一種特殊的組件，目的是在當(dāng)前組件之外渲染某些內(nèi)容。這也是React中原生實現(xiàn)的功能之一。下面是 React 文檔中關(guān)于portals的說法。

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

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

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

對于每一個Portals，我們需要指定它的目標(biāo)目的地，在那里，Portals內(nèi)容將被渲染。

<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 優(yōu)化了渲染

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

有兩個關(guān)鍵的優(yōu)化提高Vue3渲染速度：

1. Block Tree 優(yōu)化
2. 提升靜態(tài)節(jié)點樹

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

Block Tree 優(yōu)化

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

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

使用此想法，Vue3將模板分為靜態(tài)部分與動態(tài)部分?，F(xiàn)在，渲染器知道哪些節(jié)點是動態(tài)的，它不會浪費時間檢查靜態(tài)節(jié)點的變化。

這大大減少了需要被動監(jiān)視的元素數(shù)量。

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

在 Block Tree 中，每個節(jié)點具有：

• 完全靜態(tài)的節(jié)點結(jié)構(gòu)
• 不需要監(jiān)聽的靜態(tài)內(nèi)容
• 可以存儲在數(shù)組中的動態(tài)節(jié)點

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

靜態(tài)樹提升(Static Tree Hoisting)

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

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

支持 Typescript

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

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

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

超輕量級

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

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

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

準(zhǔn)備好了嗎

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

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

Vue3 已經(jīng)正式發(fā)布了，你準(zhǔn)備好了嗎，快來上手學(xué)習(xí)吧!

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

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

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。