今天給大家摟點干貨，2020 年 9 月 18 日晚 11 點半發(fā)布了 Vue 3.0 版本。到目前已經(jīng)很多公司開始鼓勵大家去學(xué)習(xí)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 方法優(yōu)化

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

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

• hoistStatic 靜態(tài)提升

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

• cacheHandlers 事件偵聽的緩存

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

• ssr 渲染

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

Vue3的組合API

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

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

入口函數(shù)中定義變量

首先我們在setup函數(shù)中去聲明變量
聲明的變量要想被監(jiān)聽 我們需要引入ref進行使用
我們想要在頁面中進行渲染 還需要將變量暴露出去后在模板中才會生效

入口文件中編寫事件函數(shù)

在模板中注冊事件后，直接在組合API中去編寫方法就可以了

組合API中reactive的使用

在前面我們了解到如果想要監(jiān)聽到組合API中的數(shù)據(jù)的變化需要用到ref，但是ref只能監(jiān)聽到簡單數(shù)據(jù)類型的變化，如果想要監(jiān)聽復(fù)雜類型的變化我們就要用到resctive

組合API的抽離

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

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

• setup的執(zhí)行時機
  beforeCreate：組件剛剛被創(chuàng)建出來，組件中的data和methods還沒有初始化好
  setup
  created：組件被創(chuàng)建出來，且組件中的data和methods已經(jīng)初始化好了

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

• 什么是reactive
  reactive是Vue3中提供的實現(xiàn)響應(yīng)式數(shù)據(jù)的方法，在Vue2中影響是數(shù)據(jù)是通過defineProperty來實現(xiàn)的，而在Vue3中響應(yīng)式數(shù)據(jù)是通過ES6的Proxy來實現(xiàn)的 reactive本質(zhì):就是將傳入的數(shù)據(jù)包裝成一個Proxy對象

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

Vue的雙向數(shù)據(jù)綁定

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

Vue3對ts的支持

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

總結(jié)

以上是生活随笔為你收集整理的《看完它面试必solo | 寻找C站宝藏》的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。