vue3.0的特性有哪些

vue3.0的特性有哪些？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

vue是什么軟件

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

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，就不需要創建對象，然后根據對象渲染。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。