今天給大家摟點干貨，2020 年 9 月 18 日晚 11 點半發布了 Vue 3.0 版本。到目前已經很多公司開始鼓勵大家去學習Vue3了，在這里小編就把自己所了解到的‘皮毛’貢獻給大家

Vue3.0 的突出亮點

• Performance：性能比Vue2快1.2~2倍
• Tree shaking support：按需編譯。體積比Vue2更小
• Composition API：組合API（類似React Hooks）
• Better TyprScript support：更好的Ts支持
• Custom Renderer API：暴露了自定義渲染API
• Fragment，Teleport（protal），Supense：更先進的組件

Vue3.0 是如何變快的

• diff 方法優化

  	//通過下面這段代碼 我們對比Vue2和Vue3的渲染<div><span>姓名：</span> <a>{{data.name}}</a></div>
  

  1.Vue2 中的虛擬dom是進行全量對比的
  
  2.Vue3新增了靜態編輯（PathFlag）在與上次須彌節點對比的時候，只對比帶有pathFlag的節點，并且可以通過flag的信息得知當前要對比的具體內容
  
  pathFlags的常見參數
  

• hoistStatic 靜態提升

  1.Vue2中無論元素是否參與更新 每次都會重新創建 然后在渲染
  2.Vue3中對于不參與更新的元素 會做靜態提升 只會被創建一次 在渲染時直接復用即可
  

• cacheHandlers 事件偵聽的緩存

  默認情況下onClick會被視為動態綁定 所以每次都會去追蹤他的變化
  因為是同一個函數 所以沒有追蹤變化 直接緩存起來復用即可 我們看到下面的的代碼中就沒有靜態標識 說明我們無需對比
  

• ssr 渲染

  有大量靜態內容的時候，這些內容會被當做純字符串推進一個buffer里面，及時存在動態的綁定，會通過模板插值嵌入進去，這樣要比通過dom來進行渲染的快很多
  當靜態內容大到一定量級時候，會用_createStaticVNode方法在客戶端去生成一個static node這些靜態node，會被直接innerHtml，就不需要創建對象，然后根據對象渲染。

Vue3的組合API

在Vue2中我們的如果想實現一個功能首先我們要去data中去定義功能所需要的數據，然后我們要在methods或者computed或者watch中編寫我們要實現功能的邏輯，每一個功能都是要重復上面的數據跟業務邏輯進行分離的編寫，不利于我們的編寫和維護，下面Vue3中就解決了這個問題

• Vue3中提供了組合API——setup setup函數是組合API的入口文件

1. 入口函數中定義變量
   
   首先我們在setup函數中去聲明變量
   聲明的變量要想被監聽 我們需要引入ref進行使用
   我們想要在頁面中進行渲染 還需要將變量暴露出去后在模板中才會生效

2. 入口文件中編寫事件函數
   
   在模板中注冊事件后，直接在組合API中去編寫方法就可以了

3. 組合API中reactive的使用
   
   在前面我們了解到如果想要監聽到組合API中的數據的變化需要用到ref，但是ref只能監聽到簡單數據類型的變化，如果想要監聽復雜類型的變化我們就要用到resctive

4. 組合API的抽離
   
   我們可以看到上面的將用戶的一些操作全部放到了 useRemoveStudent 方法中，在方法中進行暴露，我們在組合API中直接引入然后暴露就可以使用，進而解決了Vue2中的業務邏輯和數據分離的痛處，上面我們說可以將數據和邏輯放到方法中 我們也可以像下面這樣放到模塊中進行導入
   

• Composition API的本質
  我們可以將Composition API翻譯成 混合/注入API，其實就是將我們的Composition API中return 暴露出來的內容對 optionApi進行注入 注入到我們的data和methods中，在實際的開發中Composition API和Option API是可以聯合使用的

• setup的執行時機
  beforeCreate：組件剛剛被創建出來，組件中的data和methods還沒有初始化好
  setup
  created：組件被創建出來，且組件中的data和methods已經初始化好了

• setup函數使用的注意點
  因為他的執行順序是在beforeCreate和created函數之間，所以在setup函數中是無法使用data和methods
  因為我們在setup函數中不能使用data和methods，所以Vue中為了避免我們錯誤的使用，Vue3中直接將setup函數中的this修改成了undefined
  setup函數中只能是同步的 不能是異步

• 什么是reactive
  reactive是Vue3中提供的實現響應式數據的方法，在Vue2中影響是數據是通過defineProperty來實現的，而在Vue3中響應式數據是通過ES6的Proxy來實現的 reactive本質:就是將傳入的數據包裝成一個Proxy對象

• reactive注意點
  reactive參數必須是對象(json/arr)-如果給reactive傳遞了其它對象
  默認情況下修改對象，界面不會自動更新+如果想更新，可以通過重新賦值的方式
  

Vue的雙向數據綁定

• Vue2 通過 Object.defineProperty 將對象屬性轉化為 getter/setter , 該屬性是 ES5 中無法被 shim 的特性，也是 vue 不支持 IE8 及以下版本瀏覽器的原因
  在 vue 中， Object.defineProperty 無法監控到數據的下標變化，導致直接通過數組下標給數組設置新值時，無法做到實時響應。目前 vue 只針對數組的變異方法 push/pop/shift/unshift/splice/sort/reverse 做了 hack 處理，存在響應局限
  
• Vue3 則采用Proxy
  -Proxy 是 ES6 中新增的一個特性，翻譯過來意思是"代理"，用在這里表示由它來“代理”某些操作。 Proxy 讓我們能夠以簡潔易懂的方式控制外部對對象的訪問。其功能非常類似于設計模式中的代理模式。
  -Proxy 可以理解成，在目標對象之前架設一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。
  -使用 Proxy 的核心優點是可以交由它來處理一些非核心邏輯（如：讀取或設置對象的某些屬性前記錄日志；設置對象的某些屬性值前，需要驗證；某些屬性的訪問控制等）。 從而可以讓對象只需關注于核心邏輯，達到關注點分離，降低對象復雜度等目的。

Vue3對ts的支持

vue2 最初是使用純 ES(Javascript) 寫成的，而沒有引入類型檢查系統。類型檢查能有效減少重構過程中引入錯誤的機會，雖然后續采用了 Facebook 的 Flow type checker , 但沒有明顯的改觀，相比較 TypeScript 與 Visual Studio Code 集成開發工具的深度集成，Flow type checker對集成開發環境的支持也不理想。切換到 TypeScript 將允許我們自動生成聲明文件，從而減輕維護負擔