vue3的新特性及api

2021-10-07 19:29:42 字數 1820 閱讀 7727

1.響應式原理

vue2的響應式原理是利用object.defineproperty而vue3則是利用proxy。proxy的效能和功能比object.defineproperty強很多(這裡的強是指api支援更好原始碼層次)。可以看一下這邊文章proxy 與object.defineproperty介紹與對比(vue原始碼運用)傳送門。就能更好的了解變化。

2.新增了元件 api(composition api)

vue2使用的是options api而3新增了composition api(注意是新增,也就是說這兩個可以共用,甚至可以互相巢狀使用相容性很好)

vue composition api(英文版本)。可切換語言

3.片段-碎片(fragments)

這個類似於react  fragments元件(react fragment官方文件)。其實就是vue2的時候每個元件必須要有根元件,而vue3就可以不必這樣(減少不必要的dom元素)。

4.suspense

5.portals

其實這個就類似於react的portals(react portals官方文件)。

portals 提供了一種獨特的方法來將子級渲染到父元件的 dom 層次結構之外的 dom 節點中。」

這種處理模式,是彈出式視窗以及通常顯示在頁面頂部的元件所使用的一種非常好的方法。通過使用 portals,你可以確保沒有任何主機元件 css 規則會影響你要顯示的元件,並且可以避免用 z-index 進行的黑客攻擊。

6.custom renderer api暴露了自定義渲染api(teleport介紹)

7.tree shaking support:可以將無用模組「剪枝」。

1.響應式原理實現發生了變化。

2.新增了一些api

3.效能上發生了很大的變化:

1.diff演算法上優化(讓dom渲染時間縮小)

2.響應式原理的優化(減少原始碼量大小)

3.專案包大小的優化(vue3的cli打包後會比vue2小)

4.更好的支援typescript(這個是直接可以使用)

5.tree shaking support可以將無用模組「剪枝」。(模組按需載入減少包大小)

綜上所述vue3會比vue2快上2到3倍(越大的專案越明顯)。而且vue3(可以相容ie11,應該是需要配置的)和vue2可以完美相容(尤大大說不必,把專案立即公升級vue3)。

vue3專題部落格這個裡面涉及尤大提到的diff演算法,響應式原理之類的具體做了哪些優化給出了介紹(我就不班門弄斧了哈哈,畢竟我是個小菜鳥)。

強烈推薦看看這些部落格 :vue3專題

vite,乙個基於瀏覽器原生 es imports 的開發伺服器。利用瀏覽器去解析 imports,在伺服器端按需編譯返回,完全跳過了打包這個概念,伺服器隨起隨用。同時不僅有 vue 檔案支援,還搞定了熱更新,而且熱更新的速度不會隨著模組增多而變慢。針對生產環境則可以把同乙份**用 rollup 打包。(我的理解就是不用打包,跳過了這個環節。之前必須使用webpack打包,尤大大做這個的初衷是覺得webpack用不慣,就乾脆自己寫了乙個,我表示大佬就是厲害,不得不佩服)

vite介紹

vite使用及介紹

vite github位址

vite現在還在測試中不建議使用在生產環境。

我覺得vue3會是前端發展趨勢(正式發布之後會火爆),react有的api功能,vue基本都實現了且效能給方面真的提高了很多。

所以提前了解和學習vue3是有必要的。

本文只是我自己的理解,可能有不對的地方(我只是做個記錄)。

vue3新特性及api介紹(二)

接上文的介紹。vue3新特性位址戳我 vue3api介紹位址戳我 7.provide inject 用法和之前類似,不過只能在setup函式內使用 const prokey symbol provide provide prokey,aaa inject prokey,123 inject的第二個引...

vue3新特性學習小結

組合式api,主要目的就是為了解決以前那些邏輯較為複雜的大元件,各個邏輯點 相互分散,需要來來回回 跳轉 檢視,這種極不方便的操作。1.以前寫在data computed watch provide inject等標籤中的 都可以提取到乙個setup標籤中來使用,使該邏輯 相關的變數 函式處理 監聽...

vue3帶來的新特性 亮點

vue3在效能方面比vue2快了2倍。vue3中的核心api都支援了tree shaking,這些api都是通過包引入的方式而不是直接在例項化時就注入,只會對使用到的功能或特性進行打包 按需打包 這意味著更多的功能和更小的體積。vue2中,我們一般會採用mixin來復用邏輯 用倒是挺好用的,不過也存...