image.png

一，通過上面可以看到vue3的新特性有：
1.速度更快
2.體積更小
（相比Vue2，Vue3整體體積變小了，除了移出一些不常用的API，再重要的是Tree shanking
任何一個函數(shù)，如ref、reavtived、computed等，僅僅在用到的時候才打包，沒用到的模塊都被搖掉，打包的整體體積變?。?br> 3.更容易維護
4.更接近原生
5.更容易使用

速度更快
vue3相比vue2
重寫了虛擬Dom實現(xiàn)
編譯模板的優(yōu)化
更高效的組件初始化
undate性能提高1.3~2倍
SSR速度提高了2~3倍
體積更小
通過webpack的tree-shaking功能，可以將無用模塊“剪輯”，僅打包需要的
能夠tree-shaking，有兩大好處：
對開發(fā)人員，能夠?qū)ue實現(xiàn)更多其他的功能，而不必擔(dān)憂整體體積過大
對使用者，打包出來的包體積變小了
更易維護
compositon Api
可與現(xiàn)有的Options API一起使用
靈活的邏輯組合與復(fù)用
Vue3模塊可以和其他框架搭配使用
更好的Typescript支持
VUE3是基于typescipt編寫的，可以享受到自動的類型定義提示

二、Vue3新增特性
Vue 3 中需要關(guān)注的一些新功能包括：
framents（在 Vue3.x 中，組件現(xiàn)在支持有多個根節(jié)點）
Teleport（Teleport 是一種能夠?qū)⑽覀兊哪０逡苿拥?DOM 中 Vue app 之外的其他位置的技術(shù)，就有點像哆啦A夢的“任意門”）

<button @click="showToast" class="btn">打開 toast</button>
<!-- to 屬性就是目標位置 -->
<teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
        <div class="toast-msg">我是一個 Toast 文案</div>
    </div>
</teleport>

composition Api

image.png

createRenderer