阿里年薪百萬架構師，十分鐘帶你瞭解vue3新特性介紹和基本使用

vue路由的鉤子函式幾種

新特性

ref、reactive、computed、watch

新的生命週期

自定義鉤子函式

Teleport（元件位置替換）

Suspense（非同步載入元件實現）

全域性Api、配置項的最佳化

更好的支援typescript

全域性api和初始化應用的變化

全域性config

vue3將全域性配置掛在了app例項上而不是建構函式上，好處是是的應用之間的配置互不影響

全域性方法

vue3為了減小打包體積，將很多方法都採用了具名匯出的方式（如

createApp

、

nextTick

等），這使得初始化例項的方式也有所區別

例如：

因為vue3不再有Vue建構函式，所以一些全域性的自定義屬性或者方法也沒法透過Vue。prototype。xx掛在到vm例項上，這時候需要藉助

app。config。globalProperties

來實現這一功能

例如：

vue3的中介軟體也是透過每個應用例項下的use方法去註冊，且支援鏈式呼叫

compositionApi

ref

需要注意的是

setup

返回的變數都是

Ref

型別，修改ref的值需要修改

ref。value

，在其他的方法中也能透過

this。xx

直接修改

使例子

computed

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

reactive

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

watch監聽

vue3提供了再setup中使用的資料監聽函式

watch

，因為setup只是在初始化的時候呼叫一次，無法根據資料變化實時呼叫，所以提供了

watch

方法解決這個問題

下面是wacth方法的簡單使用例項：

provide、inject

根元件注入

ps：如果setup中有非同步操作，inject必須在非同步操作之前

路由相關

生命週期

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

vue3提供了在setup中使用的生命週期函式

變更

。sync修飾符=>v-model：propName

目前遇到的問題

keep-alive不可用