vue3.0中有什么新特性

這篇文章主要介紹了vue3.0中有什么新特性，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue3.0新特性：1、節(jié)點(diǎn)打Tag；2、事件開緩存；3、響應(yīng)式Proxy；4、Composition API；5、新增三個(gè)組件Fragment、Teleport（傳送門）和Suspense；6、Tree Shaking等等。

Vue3.0新特性

一、節(jié)點(diǎn)打Tag

靜態(tài)節(jié)點(diǎn)

<span>value</span>

動(dòng)態(tài)節(jié)點(diǎn)

<span>{{value}}</span>patchFlag

vue3.0底層，會(huì)自動(dòng)識(shí)別某個(gè)節(jié)點(diǎn)是否是動(dòng)態(tài)的，如果是動(dòng)態(tài)的會(huì)自動(dòng)生成標(biāo)識(shí)（不同的動(dòng)態(tài)會(huì)有不同的標(biāo)識(shí)對(duì)應(yīng)，如內(nèi)容文本的動(dòng)態(tài)，或者id的動(dòng)態(tài)），從而在每次更新dom時(shí)，直接跳過哪些靜態(tài)的節(jié)點(diǎn)，直接定位到動(dòng)態(tài)的節(jié)點(diǎn)，大大節(jié)省效率。

二、事件開緩存

一般為一個(gè)節(jié)點(diǎn)設(shè)置了監(jiān)聽時(shí)間，每次頁(yè)面進(jìn)行更新，就會(huì)重新生成新的監(jiān)聽函數(shù)，啟用了cacheHandlers，就會(huì)在第一次更新的時(shí)候進(jìn)行自動(dòng)識(shí)別是否可以緩存，如果可以就進(jìn)行緩存，這樣頁(yè)面更新就不需要重新生成，尤其是在組件上，極大地減少了子組件的不必要刷新和資源消耗。

三、響應(yīng)式Proxy

Proxy(vue3.0) vs Object.defineProperty (vue2.0)

1、Vue2.0響應(yīng)式原理

• 響應(yīng)化過程需要遍歷data，props等，消耗較大

• 不支持Set/Map、class、數(shù)組等類型

• 新加或刪除屬性無(wú)法監(jiān)聽

• 數(shù)組響應(yīng)化需要額外實(shí)現(xiàn)

• 對(duì)應(yīng)的修改語(yǔ)法有限制

2、Vue3.0響應(yīng)式原理：使用ES6的Proxy來(lái)解決這些問題。

通過Proxy代理，來(lái)攔截對(duì)data的一系列的操作。

四、Composition API

不要為了Composition而Composition

提高了代碼質(zhì)量的上限，但它也降低了下限

被定位為高級(jí)特性，因?yàn)樗荚诮鉀Q的問題主要出現(xiàn)在大型應(yīng)用程序中。

我們不打算徹底修改文檔來(lái)把它用作默認(rèn)方案。

五、Teleport（傳送門）

Modal、Dialog、Select、Dropdown…

六、Fragments

template中不需要用一個(gè)p包裹即沒必要只有一個(gè)根節(jié)點(diǎn)，可以多個(gè)標(biāo)簽（節(jié)點(diǎn)）并列

七、Custom Renderer API ( createRenderer )

• NativeScript Vue integration underway by @rigor789

• Users already experimenting w/ WebGL custom renderer that can be used alongside a normal Vue application(Vugel)

WEEX、Vue Native、小程序…

八、Tree Shaking

按需加載

除了保留一些必須的部分如：Virtual DOM更新算法、響應(yīng)式系統(tǒng)，其他都是按需加載例如v-model等。

九、Suspense

• Wait on nested async dependencies in a nested tree

• Works with async setup()

• Works with Aysnc Components

可以實(shí)現(xiàn)異步加載組件，整個(gè)DOM會(huì)事先在內(nèi)存中進(jìn)行虛擬的渲染，此時(shí)會(huì)等待異步的組件渲染，等所有的組件渲染完成之后，才會(huì)渲染到界面DOM上去。

十、Better TypeScript Support

• Codebase written in TS w/ auto-generated type definitions

• API is the same in JS and TS

• In fact, code will alse be largely the same

• TSX support

• Class component is still supported

十一、踩坑整理

• 事件

  默認(rèn)自動(dòng)掛載根節(jié)點(diǎn)、廢棄xxx.native事件

  新增emits配置

1. inheritAttrs: false (class, style, events, css scope)

   設(shè)置不默認(rèn)掛載到根節(jié)點(diǎn)，不過這會(huì)導(dǎo)致class等都不會(huì)掛載到根節(jié)點(diǎn)上

2. props

   組件中設(shè)置一下事件屬性聲明。

• 插槽

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-McvPeqpz-1606459132262)(C:\Users\20194\AppData\Roaming\Typora\typora-user-images\image-20201127104234202.png)]

• watch

  

vue3.0中，可以通過配置flush：“sync“，來(lái)使得watch里面的函數(shù)和監(jiān)聽的元素值改變一起進(jìn)行，不再在組件更新后執(zhí)行。

• v-model & .sync
  

• JSX / TSX

  1、@ant-design-vue / jsx

  原來(lái)有的需要通過對(duì)象的方式來(lái)傳屬性值，現(xiàn)在新定義了屬性，可以直接傳
  

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue3.0中有什么新特性”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!