一、 Vue3與Vite構(gòu)建工具簡(jiǎn)介

image.png

image.png

image.png

image.png

Vite構(gòu)建工具（其他的打包工具有webpack，grunt，gulp）

image.png

image.png

構(gòu)建

二、創(chuàng)建Vue3項(xiàng)目

• vite在TypeScript結(jié)合使用上，直接開箱即用，不需要額外配置。

• Vue3語法兼容Vue2語法。Vue3的setup與Vue2的data、methods可以同時(shí)存在使用，但是不建議這樣操作，優(yōu)先使用setup組合式返回值。setup是先于beforeCreate、data等鉤子執(zhí)行的，所以在data中可以通過this讀取出setup返回值，反之不可。

  
  
  構(gòu)建1

構(gòu)建vue3項(xiàng)目

image.png

實(shí)操創(chuàng)建

依賴添加異常，需要檢查網(wǎng)絡(luò)或代理時(shí)，嘗試使用國內(nèi)鏡像源，這里經(jīng)常會(huì)有小坑，更換為國內(nèi)鏡像源以提高穩(wěn)定性：

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.檢查當(dāng)前鏡像源：

npm config get registry

三、Vue2與Vue3項(xiàng)目api區(qū)別

• Vue2使用選項(xiàng)式Api，Vue3使用組合式Api
• template內(nèi)，Vue3可以不需要根節(jié)點(diǎn)，Vue2必須包含唯一 一個(gè)根節(jié)點(diǎn)。
• Vue3支持TypeScript
• Vue3使用Vite打包，Vue2使用WebPack打包，且提升了打包速度
• Vue3的Hooks替代Vue2的mixin，整合數(shù)據(jù)方法
• Vue3的Pinia替代Vue2的VueX，保存數(shù)據(jù)狀態(tài)

vue2

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

vue3

image.png

setup案例

setup簡(jiǎn)化

image.png

四、ref與reactive響應(yīng)式

• 基本類型的響應(yīng)式數(shù)據(jù)，只能使用ref

基本類型

• 對(duì)象類型的響應(yīng)式數(shù)據(jù)

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

reactive對(duì)象類型

2.ref處理對(duì)象類型響應(yīng)式，底層使用的還是reactive

image.png

image.png

• ref和reactive區(qū)別

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

image.png

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

image.png

• toRefs與 toRef 使用

作用：將一個(gè)響應(yīng)式對(duì)象中的每一個(gè)屬性，轉(zhuǎn)換為ref 對(duì)象
備注：toRefs與 toRef 功能一致，但 toRefs 可以批量轉(zhuǎn)換整個(gè)對(duì)象，toRef只能轉(zhuǎn)指定值。結(jié)構(gòu)體name修改，person內(nèi)對(duì)應(yīng)的屬性值也會(huì)響應(yīng)式變化。

image.png

• 響應(yīng)式對(duì)象取值特殊情況

image.png

五、計(jì)算屬性

引入import { reactive,ref, toRef, toRefs,computed } from 'vue'
同樣使用的時(shí)候通過computed 包裹要計(jì)算的內(nèi)容函數(shù)

image.png

六、watch屬性

image.png

image.png

image.png

• 1.監(jiān)視 ref 定義的【基本類型】數(shù)據(jù)：直接寫數(shù)據(jù)名即可，監(jiān)視的是其 value 值的改變。調(diào)用這個(gè)函數(shù)可以終止監(jiān)聽，比如函數(shù)名stopwatch()

image.png

• 2.監(jiān)視對(duì)象：監(jiān)視r(shí)ef對(duì)象。

不管是ref還是reactive監(jiān)視一整個(gè)對(duì)象時(shí)而不是某個(gè)非對(duì)象屬性，則只要外圍對(duì)象沒有生成新的對(duì)象賦值，則newValue、oldValue都是指向新值。雖然對(duì)象內(nèi)屬性改動(dòng)變化了，但是對(duì)象還是那個(gè)對(duì)象，對(duì)象地址值不變。

image.png

image.png

• 3.監(jiān)視對(duì)象：監(jiān)視r(shí)eactive對(duì)象。

reactive只能定義對(duì)象，所以只能監(jiān)視整個(gè)對(duì)象，這個(gè)模式默認(rèn)開啟深度監(jiān)視，且無法關(guān)閉。深度監(jiān)視開啟后，就可以監(jiān)視對(duì)象內(nèi)的某個(gè)任意屬性變化。

image.png

• 4.偵聽對(duì)象內(nèi)的某個(gè)特定屬性，其他屬性不監(jiān)視

對(duì)象子屬性：基本類型屬性

image.png

對(duì)象子屬性：對(duì)象類型屬性。手動(dòng)開啟深度監(jiān)視。

image.png

image.png

• 5.偵聽多個(gè)屬性，寫成數(shù)組形式

image.png

七、watchEffect屬性

image.png

image.png

八、標(biāo)簽節(jié)點(diǎn)的ref屬性

image.png

image.png

九、組件傳參：defineProps屬性

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

image.png

十、Vue3生命周期

• setup函數(shù)替代了Vue2中beforeCreate、created生命周期。

• 程序解析到子組件時(shí)，子組件的可執(zhí)行的生命周期全部經(jīng)歷后，才會(huì)繼續(xù)執(zhí)行父組件剩余生命周期。

  
  
  image.png

十一、Vue3的Hooks

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

useDog.ts

useSum.ts

使用hooks

十二、Vue3的路由

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

image.png

• 路由器工作模式

image.png

image.png

image.png

image.png

• 路由傳參

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

image.png

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

image.png

路由配置props:true，所有路由器接收參數(shù)都轉(zhuǎn)換為組件屬性

image.png

路由配置props其他寫法

image.png

3.編程式路由器userRouter使用，RouterLink標(biāo)簽可以用的api屬性u(píng)serRouter也可以用

image.png

image.png

4.重定向路由導(dǎo)航redirect使用。可用于程序初始化頁面顯示的組件內(nèi)容。

image.png

十三、Vuex狀態(tài)管理升級(jí)為Vue3的Pinia

• 下載、安裝、初始化

  
  
  image.png

npm i pinia 安裝下載

image.png

• 存儲(chǔ)和讀取數(shù)據(jù)

  
  
  image.png

image.png

image.png

• pinia內(nèi)容值修改的方式。修改就是vuex里的actions+mutations（相當(dāng)于setters）。

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

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

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

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

actions修改方式

• pinia的storeToRefs響應(yīng)式數(shù)據(jù)使用。storeToRefs只會(huì)關(guān)注sotre中數(shù)據(jù)，不會(huì)對(duì)方法進(jìn)行ref包裹。

  
  
  image.png

• pinia的getters

  
  
  image.png

image.png

• pinia訂閱監(jiān)聽數(shù)據(jù)變化。在組件使用到的地方訂閱。

  
  
  image.png

• pinia選項(xiàng)式寫法和組合式寫法

  
  
  選項(xiàng)式寫法

組合式寫法

十四、組件間通信方式

• 1.props傳參方式通信（使用頻率高）

  
  
  image.png

image.png

• 2.emit自定義事件通信（使用頻率高）

  
  
  image.png

• 3.mitt全局事件通信（使用頻率高）。類似vue2全局事件總線。mitt可以實(shí)現(xiàn)任意組件間通信。
  注意在onUnmounted組件銷毀時(shí)卸載綁定的事件，調(diào)用emitter.off('事件名')解綁，節(jié)省資源。

  
  
  image.png

image.png

• 4.v-model通信。
  實(shí)現(xiàn)雙向綁定的原理

  
  
  image.png

image.png

封裝一個(gè)雙向綁定username值的v-model組件功能，實(shí)現(xiàn)父與子組件（input類型）的雙向通信。在子組件呈現(xiàn)父組件傳遞過來的modelValue參數(shù)，并且給父組件發(fā)送自定義事件，將值回傳賦值給username。

image.png

更改value

• 5.attrs實(shí)現(xiàn)爺爺組件向?qū)O子組件通信。兒子組件需要設(shè)置attrs綁定。

  
  
  image.png

image.png

image.png

• 6.parent實(shí)現(xiàn)組件通信。
  
  image.png

• 7.provide與inject實(shí)現(xiàn)組件通信。provide祖向?qū)O通信，inject接收注冊(cè)。

  
  
  image.png

image.png

十四、插槽slot。也是組件件通信的一種方式，多用于ui構(gòu)建。

• 默認(rèn)插槽。名稱默認(rèn)是<slot name='default' >

image.png

image.png

• 具名插槽。v-slot='abc'可以簡(jiǎn)寫為#abc

image.png

• 作用域插槽。

數(shù)據(jù)在子那邊，但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)，卻由父親決定。
如：壓歲錢在孩子那，但根據(jù)壓歲錢買的東西，卻由父親決定。

image.png

十五、響應(yīng)式數(shù)據(jù)其他api補(bǔ)充

• 淺層次響應(yīng)式：淺層次雙向綁定響應(yīng)式shallowRef、shallowReactive

image.png

• 單向只讀響應(yīng)式readOnly(深層次)、shallowReadOnly（淺層次）

image.png

image.png

image.png

• toRaw與martRaw

toRaw對(duì)響應(yīng)式數(shù)據(jù)剝殼，得到無響應(yīng)式功能的原始數(shù)據(jù)對(duì)象，多用于傳參的時(shí)候

image.png

markRaw永久性的設(shè)置為原始數(shù)據(jù)對(duì)象

image.png

image.png

• 自定義Ref，customRef。

實(shí)現(xiàn)Ref響應(yīng)式功能

Ref基本原理使用

customRef：在原生Ref功能上加上自己的處理邏輯
如實(shí)現(xiàn)一個(gè)延時(shí)更新的Ref，封裝成hooks

customRef實(shí)現(xiàn)

十六、Teleport使用

image.png

image.png