一、 Vue3與Vite構建工具簡介

image.png

Vite構建工具（其他的打包工具有webpack，grunt，gulp）

image.png

構建

二、創建Vue3項目

vite在TypeScript結合使用上，直接開箱即用，不需要額外配置。
Vue3語法兼容Vue2語法。Vue3的setup與Vue2的data、methods可以同時存在使用，但是不建議這樣操作，優先使用setup組合式返回值。setup是先于beforeCreate、data等鉤子執行的，所以在data中可以通過this讀取出setup返回值，反之不可。

構建1

構建vue3項目

image.png

實操創建

依賴添加異常，需要檢查網絡或代理時，嘗試使用國內鏡像源，這里經常會有小坑，更換為國內鏡像源以提高穩定性：

1使用淘寶鏡像：

npm config set registry https://registry.npmmirror.com

2.使用騰訊鏡像：

npm config set registry https://mirrors.cloud.tencent.com/npm/

3.使用華為鏡像：

npm config set registry https://repo.huaweicloud.com/repository/npm/

4.檢查當前鏡像源：

npm config get registry

三、Vue2與Vue3項目api區別

Vue2使用選項式Api，Vue3使用組合式Api
template內，Vue3可以不需要根節點，Vue2必須包含唯一一個根節點。
Vue3支持TypeScript
Vue3使用Vite打包，Vue2使用WebPack打包，且提升了打包速度
Vue3的Hooks替代Vue2的mixin，整合數據方法
Vue3的Pinia替代Vue2的VueX，保存數據狀態

hook組合式封裝，發揮了Vue3組件化開發的魅力。

image.png

setup案例

setup簡化

image.png

四、ref與reactive響應式

基本類型的響應式數據，只能使用ref

基本類型

對象類型的響應式數據

1.reactive方式，只能定義對象類型。在setup中只需要取出使用即可，如car.price=200觸發響應式和賦值。

reactive對象類型

2.ref處理對象類型響應式，底層使用的還是reactive

image.png

ref和reactive區別

分配不同對象時，對于ref只需要car.value=新對象，而對于reactive需要借助Object.assign(被替換對象，新對象1，新對象2...)。ref包裹定義基本數據類型和對象數據類型，而reactive只能定義對象數據類型。

image.png

car.value=ref({brand:'五菱',price:50})替換賦值生成一個新對象
Object.assign(car,{brand:'五菱',price:50})對象內屬性一一對應覆蓋，還是原來的對象

image.png

toRefs與 toRef 使用

作用：將一個響應式對象中的每一個屬性，轉換為ref 對象
備注：toRefs與 toRef 功能一致，但 toRefs 可以批量轉換整個對象，toRef只能轉指定值。結構體name修改，person內對應的屬性值也會響應式變化。

image.png

響應式對象取值特殊情況

image.png

五、計算屬性

引入import { reactive,ref, toRef, toRefs,computed } from 'vue'
同樣使用的時候通過computed 包裹要計算的內容函數

image.png

六、watch屬性

image.png

1.監視 ref 定義的【基本類型】數據：直接寫數據名即可，監視的是其 value 值的改變。調用這個函數可以終止監聽，比如函數名stopwatch()

image.png

2.監視對象：監視ref對象。

不管是ref還是reactive監視一整個對象時而不是某個非對象屬性，則只要外圍對象沒有生成新的對象賦值，則newValue、oldValue都是指向新值。雖然對象內屬性改動變化了，但是對象還是那個對象，對象地址值不變。

image.png

3.監視對象：監視reactive對象。

reactive只能定義對象，所以只能監視整個對象，這個模式默認開啟深度監視，且無法關閉。深度監視開啟后，就可以監視對象內的某個任意屬性變化。

image.png

4.偵聽對象內的某個特定屬性，其他屬性不監視

對象子屬性：基本類型屬性

image.png

對象子屬性：對象類型屬性。手動開啟深度監視。

image.png

5.偵聽多個屬性，寫成數組形式

image.png

七、watchEffect屬性

image.png

八、標簽節點的ref屬性

image.png

九、組件傳參：defineProps屬性

defineProps接收組件傳遞的參數。defineXXX都不需要直接引用，是屬于宏函數。

image.png

十、Vue3生命周期

setup函數替代了Vue2中beforeCreate、created生命周期。
程序解析到子組件時，子組件的可執行的生命周期全部經歷后，才會繼續執行父組件剩余生命周期。

image.png

十一、Vue3的Hooks

Hooks的使用替換了Vue2中mixin的使用，是實現組合式API開發的關鍵。可以在創建的Hooks的useXXX文件函數里面封裝你的代碼，也可以使用生命周期鉤子函數。合理的封裝你的功能模塊。

useDog.ts

useSum.ts

使用hooks

十二、Vue3的路由

Vue3和Vue2路由使用基本相同。

image.png

路由器工作模式

image.png

路由傳參

1.query傳參，兩種寫法方式。字符串寫法和對象寫法。

image.png

2.params傳參，也是有兩種寫法方式。字符串寫法和對象寫法。但是注意這時候，只能使用name路由路徑寫法。注意，這種寫法不可以傳遞對象和數組。

image.png

路由配置props:true，所有路由器接收參數都轉換為組件屬性

image.png

路由配置props其他寫法

image.png

3.編程式路由器userRouter使用，RouterLink標簽可以用的api屬性userRouter也可以用

image.png

4.重定向路由導航redirect使用。可用于程序初始化頁面顯示的組件內容。

image.png

十三、Vuex狀態管理升級為Vue3的Pinia

下載、安裝、初始化

image.png

npm i pinia 安裝下載

image.png

存儲和讀取數據

image.png

image.png

pinia內容值修改的方式。修改就是vuex里的actions+mutations（相當于setters）。

// 數據
let select=ref(1)// 用戶選擇的數字

// 方法
function xiugai(){
// 第一種對源數據直接修改方式，直接操作三次
countstore.sum += 1
countstore.school= '黑馬培訓'
countstore.address= '深圳'

// 第二種patch修改方式，一次數據操作
countstore.$patch(
{
sum:888，
school:'尚硅谷，
address:'北京
})

// 第三種actions修改方式，抽離共同修改，復用多
countstore.increment(select.value)
}