2020年，須要瞭解 Vue3 的哪些知識

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

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

前端開發工程師必讀書籍有哪些值得推薦？

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。

• 將異步組件包裝在<template #default>標記中
• 在咱們的 Async 組件的旁邊添加一個兄弟姐妹，標籤爲<template #fallback>。
• 將兩個組件都包裝在<suspense>組件中

使用插槽，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 已經正式發佈了，你準備好了嗎，快來上手學習吧！

---

原文：https://medium.com/swlh/what-...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。