vue3新特性介紹和基本使用

ref、reactive、computed、watch

新的生命周期

自定義鈎子函數

Teleport（元件位置替換）

Suspense（異步加載元件實作）

全局Api、配置項的優化

更好的支援typescript

vue3将全局配置挂在了app執行個體上而不是構造函數上，好處是是的應用之間的配置互不影響

vue3為了減小打包體積，将很多方法都采用了具名導出的方式（如 createApp、nextTick等），這使得初始化執行個體的方式也有所差別

例如：

因為vue3不再有Vue構造函數，是以一些全局的自定義屬性或者方法也沒法通過Vue.prototype.xx挂在到vm執行個體上，這時候需要借助app.config.globalProperties來實作這一功能

附

vue3的中間件也是通過每個應用執行個體下的use方法去注冊,且支援鍊式調用

需要注意的是setup傳回的變量都是Ref類型，修改ref的值需要修改ref.value,在其他的方法中也能通過this.xx直接修改

使例子

computed接收一個函數，改函數的傳回值作為計算屬性的值

在setup中，reactive可以為我們集中定義屬性

vue3提供了再setup中使用的資料監聽函數watch,因為setup隻是在初始化的時候調用一次，無法根據資料變化實時調用，是以提供了watch方法解決這個問題

下面是wacth方法的簡單使用執行個體：

根元件注入

ps:如果setup中有異步操作，inject必須在異步操作之前

有兩個生命周期名稱修改以及兩個新增

vue3提供了在setup中使用的生命周期函數

.sync修飾符 => v-model:propName

keep-alive不可用