vue3在效能方面比vue2快了2倍。
vue3中的核心api都支援了tree-shaking，這些api都是通過包引入的方式而不是直接在例項化時就注入，只會對使用到的功能或特性進行打包（按需打包），這意味著更多的功能和更小的體積。
vue2中，我們一般會採用mixin來復用邏輯**，用倒是挺好用的，不過也存在一些問題：例如****不清晰、方法屬性等衝突。基於此在vue3中引入了composition api（組合api），使用純函式分隔復用**。和react中的hooks的概念很相似。
更好的邏輯復用和**組織
更好的型別推導
乙個簡單的例子
x:}<）。/div>
y:}<
/div>
<
/template>
import
from
"vue"
;const
usemousemove=(
)=>
onmounted((
)=>);
onunmounted((
)=>);
return;}
;export
default
definecomponent(=
usemousemove()
;return;}
});<
/script>新增的三個元件。
fragment
在書寫vue2時，由於元件必須只有乙個根節點，很多時候會新增一些沒有意義的節點用於包裹。fragment元件就是用於解決這個問題的（這和react中的fragment元件是一樣的
這意味著現在可以這樣寫元件了。
...<
/header>
"$attrs"
>
...<
/main>
...<
/footer>
<
/template>
export
default
;<
/script>
或者這樣
import
from
'vue'
;export
default
definecomponent(,
[h('header',,
['...'])
,h('main',,
['...'])
,h('footer',,
['...'])
,]);
}});
teleport
teleport其實就是react中的portal。portal 提供了一種將子節點渲染到存在于父元件以外的 dom 節點的優秀的方案。
乙個 portal 的典型用例是當父元件有 overflow: hidden 或 z-index 樣式時，但你需要子元件能夠在視覺上「跳出」其容器。例如，對話方塊、懸浮卡以及提示框。123<同樣的，這和react中的supense是一樣的。
suspense 讓你的元件在渲染之前進行「等待」，並在等待時顯示 fallback 的內容。>>
<
/template>
loading...
<
/template>
<
/suspense>
<
/template>
vue3新特性學習小結
組合式api，主要目的就是為了解決以前那些邏輯較為複雜的大元件，各個邏輯點 相互分散，需要來來回回 跳轉 檢視，這種極不方便的操作。1.以前寫在data computed watch provide inject等標籤中的 都可以提取到乙個setup標籤中來使用，使該邏輯 相關的變數 函式處理 監聽...
vue3的新特性及api
1.響應式原理 vue2的響應式原理是利用object.defineproperty而vue3則是利用proxy。proxy的效能和功能比object.defineproperty強很多 這裡的強是指api支援更好原始碼層次 可以看一下這邊文章proxy 與object.defineproperty...
vue3新特性及api介紹（二）
接上文的介紹。vue3新特性位址戳我 vue3api介紹位址戳我 7.provide inject 用法和之前類似，不過只能在setup函式內使用 const prokey symbol provide provide prokey,aaa inject prokey,123 inject的第二個引...