vue3.0有哪些新特性

vue3.0新特性有：1、效能比vue2.x塊1.2～2倍；2、支援tree-shaking；3、引入了Composition API；4、暴露了自訂渲染API；5 、新增三個元件（Fragment、Teleport、Suspense）等。

本教學操作環境：windows7系統、vue3.0版，DELL G3電腦。

vue3 帶來的六大新特性

• #Performance：效能比vue2.x區塊1.2～2倍
• Tree shaking support ：支援按需編譯，體積更小
• Composition API：組合API，類似React Hooks
• Custom Renderer API：暴露了自訂渲染API
• Fragment，Teleport（ Protal），Suspense：新增三個元件
• Better TypeScript support：更好的支援TS

Performance

Vue3.0在性能方面比Vue2.x快了1.2～2倍。

• 重寫虛擬DOM的實作

• ##靜態提升與事件偵聽器快取

• SSR 速度提高

#Three-shaking support

Vue3.x中的核心API都支援tree-shaking，這些API都是透過套件引入的方式而不是直接在實例化時就注入，只會對使用到的功能或特性進行打包（按需打包），這意味著更多的功能和更小的體積。

Composition API

Vue2.x中，我們通常會採用mixin來重複使用邏輯程式碼，使用起來雖然方便，但也存在一些問題：程式碼來源不清晰、方法屬性可能出現衝突。因此，Vue3.x引入了Composition API（組合API），使用純函數分割復用程式碼。和React Hooks的概念相似。

• 更好的邏輯重複使用和程式碼組織
• 更好的型別推導

#Fragment、Teleport、Suspense

新增三個元件。

Fragment

在書寫Vue2.x時，由於元件必須是根結點，很多時候會加入一些沒有意義的節點來包裝。 Fragment元件就是用來解決這個問題的（這和React 中的Fragment元件是一樣的）。

Teleport

Teleport其實就是React中的Portal。 Portal 提供了將子節點渲染到存在於父元件以外的 DOM 節點的優秀的方案。

一個 portal 的典型用例是當父元件有 overflow: hidden 或 z-index 樣式時，但你需要子元件能夠在視覺上「跳出」其容器。例如，對話框、懸浮卡以及提示框。

Suspense

同樣的，這和React中的Supense是一樣的。

Suspense 讓你的元件在渲染之前進行“等待”，並在等待時顯示 fallback 的內容。

Better TypeScript support

Vue3.x採用TypeScript重寫，開發者使用Vue3.x時可以充分體驗TS為編碼帶來的便利。

Custom Renderer API

這個API定義了虛擬DOM的渲染規則，這意味著使用自訂API可以達到跨平台的目的。

最後：Vue3.0 是如何變快的？

• diff 演算法最佳化

  • Vue2 中的虛擬dom 是進行全量比較
  • Vue3 新增靜態標記

• hoistStatic 靜態提升

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

• #cacheHandlers 事件偵聽器快取

  • 預設情況下onClick會被視為動態綁定，所以每次都會去追蹤它的變化，但是因為是同一個函數，所以沒有追蹤變化，直接快取起來復用即可

• ssr 渲染

  • 當有大量靜態的內容的時候，這些內容會被當作純字串推進buffer裡面，即使存在動態的綁定，會透過模版插值嵌入進去，這樣會比透過虛擬dom來渲染的快上很多很多
  • 當靜態內容大到一定量級的時候，會用_createStaticVNode方法在客戶端去產生一個static node。這些靜態node，會被直接innerHtml，就不需要建立對象，然後根據物件渲染。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是vue3.0有哪些新特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！