????本篇文章是記錄來自尚硅谷禹神2023年課程的學(xué)習(xí)筆記，不得不說禹神講的是真的超級棒！

創(chuàng)建Vue3工程

基于vite創(chuàng)建，vite是一個新一代的前端構(gòu)建工具。

優(yōu)點：

• 請求快速的熱重載
• 對ts、jsx支持開箱即用
• 構(gòu)建方式有改善

  • wepack構(gòu)建流程
    

  • vite構(gòu)建流程
    

創(chuàng)建步驟：

## 1.創(chuàng)建命令
npm create vue@latest## 2.具體配置
## 配置項目名稱
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由環(huán)境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia環(huán)境
√ Add Pinia for state management?  No
## 是否添加單元測試
√ Add Vitest for Unit Testing?  No
## 是否添加端到端測試方案
√ Add an End-to-End Testing Solution? ? No
## 是否添加ESLint語法檢查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代碼格式化
√ Add Prettier for code formatting?  No

安裝插件：

目錄分析：

• Vite 項目中，index.html 是項目的入口文件，在項目最外層。
• 加載index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
• Vue3**中是通過 **createApp 函數(shù)創(chuàng)建一個應(yīng)用實例。

main.ts文件解析

創(chuàng)建應(yīng)用：import createApp from 'vue'

導(dǎo)入根組件：import App from ./App.vue

掛載組件：createApp(App).mount('#app')

初始化項目

編寫一個App組件：

<template><div class="app"><h1>你好啊！</h1></div>
</template><script lang="ts">export default {	//暴露name:'App' //組件名}
</script><style>.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

啟動項目：npm run dev

寫一個簡單的效果

Vue3向下兼容Vue2語法，且Vue3中的模板中可以沒有根標(biāo)簽。

新創(chuàng)建的組件：

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年齡：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年齡+1</button><button @click="showTel">點我查看聯(lián)系方式</button></div>
</template><script lang="ts">export default {name:'App',data() {return {name:'張三',age:18,tel:'13888888888'}},methods:{changeName(){this.name = 'zhang-san'},changeAge(){this.age += 1},showTel(){alert(this.tel)}},}
</script>

在App.vue中使用組件

<template><div class="app"><h1>你好啊！</h1><Person/>	<!--第三步，使用組件--></div>
</template><script lang="ts">import Person from './components/Person.vue'	//第二步，導(dǎo)入組件export default {	//暴露name:'App', //組件名components:{Person}	//第一步，注冊組件}
</script><style>...</style>

上面是使用Vue2的選項式（OPotionsAPI）寫法來寫的

Options類型的 API，數(shù)據(jù)、方法、計算屬性等，是分散在：data、methods、computed中的，若想新增或者修改一個需求，就需要分別修改：data、methods、computed，不便于維護和復(fù)用。

組合式API的優(yōu)勢：可以用函數(shù)的方式，更加優(yōu)雅的組織代碼，讓相關(guān)功能的代碼更加有序的組織在一起。

Vue3核心語法

setup函數(shù)

語法模版：

<script lang="ts">export default{name:'',setup(){//聲明數(shù)據(jù)let 變量名 = 變量值//聲明方法function 方法名(){//方法體}return{變量名,方法名}// 返回一個對象，對象中的內(nèi)容，模板中可以直接使用}}
</script>

例子：

<script lang="ts">export default {name:'Person',setup(){// 數(shù)據(jù)，原來寫在data中（注意：此時的name、age、tel數(shù)據(jù)都不是響應(yīng)式數(shù)據(jù)）let name = '張三'let age = 18let tel = '13888888888'// 方法，原來寫在methods中function changeName(){name = 'zhang-san' //注意：此時這么修改name頁面是不變化的console.log(name)}function changeAge(){age += 1 //注意：此時這么修改age頁面是不變化的console.log(age)}function showTel(){alert(tel)}return {name,age,tel,changeName,changeAge,showTel}}}
</script>

??注意：setup函數(shù)中的this是undefined，Vue3中已經(jīng)弱化this了。

setup的返回值

• 若返回的一個對象，這對象的屬性、方法等，在模版中均可以直接使用。

• 若返回的是一個函數(shù)，則可以自定義渲染內(nèi)容，代碼如下：

  setup(){return ()=> '你好啊！'	//這樣會直接覆蓋所在組件和樣式
  }
  

setup和選項式的區(qū)別

• Vue2 的配置（data、methos…）中可以訪問到 setup中的屬性、方法。
• 但在setup中不能訪問到Vue2的配置（data、methos…）。
• 如果與Vue2沖突，則setup優(yōu)先。

setup語法糖

setup函數(shù)有一個語法糖，這個語法糖，可以讓我們把setup獨立出去。

語法模版：

<script lang="" setup>//寫數(shù)據(jù)//寫方法//不用寫return了
</script>

錯誤寫法?：

例子：

<!-- 原本的寫法 -->
<template><div class="person"><h2>姓名：{{name}}</h2><h2>年齡：{{age}}</h2><button @click="changName">修改名字</button><button @click="changAge">年齡+1</button><button @click="showTel">點我查看聯(lián)系方式</button></div>
</template><script lang="ts">export default {name:'Person',}
</script><!-- 下面的寫法是setup語法糖 -->
<script setup lang="ts">console.log(this) //undefinedlet name = '張三'let age = 18let tel = '13888888888'function changName(){name = '李四'}function changAge(){console.log(age)age += 1}function showTel(){alert(tel)}
</script>

指定組件名稱

上述代碼中，我們還需要編寫一個不寫setup的script標(biāo)簽，去注定組件名稱。

<script lang="ts">export default {//需要編寫一個不寫`setup`的`script`標(biāo)簽，去注定組件名稱name:'Person',}
</script><script setup lang="ts">...
</script>

這樣就很麻煩，所以我們可以借助vite中的插件簡化：

1. 安裝插件

   npm i vite-plugin-vue-setup-extend -D
   

2. 配置vite.config.ts

   import { defineConfig } from 'vite'
   import VueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({plugins: [ VueSetupExtend() ]
   })xxxxxxxxxx import { defineConfig } from 'vite'import VueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({  plugins: [ VueSetupExtend() ]})
   

3. 使用插件

   //在原來的語法糖中使用
   <script setup lang="ts" name="Person">
   

響應(yīng)式數(shù)據(jù)

ref函數(shù)

定義基本類型

作用：創(chuàng)建基本類型的響應(yīng)式數(shù)據(jù)

語法：let 變量名 = ref(初始值)

使用方法：

1. 引入ref
import {ref} from 'vue'2. 使用ref
let 變量名 = ref(初始值)3. 使用響應(yīng)式數(shù)據(jù)：變量名.value = 變量值

返回值：是一個RefImpl的實例對象，簡稱ref對象或ref，ref對象的value屬性是響應(yīng)式的。

注意??：

• JS中操作數(shù)據(jù)需要：xxx.value，但模板中不需要.value，直接使用即可。
• 對于let name = ref('張三')來說，name不是響應(yīng)式的，name.value是響應(yīng)式的。

例子：

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年齡：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年齡+1</button><button @click="showTel">點我查看聯(lián)系方式</button></div>
</template><script setup lang="ts" name="Person">import {ref} from 'vue'// name和age是一個RefImpl的實例對象，簡稱ref對象，它們的value屬性是響應(yīng)式的。let name = ref('張三')let age = ref(18)// tel就是一個普通的字符串，不是響應(yīng)式的let tel = '13888888888'function changeName(){// JS中操作ref對象時候需要.valuename.value = '李四'console.log(name.value)// 注意：name不是響應(yīng)式的，name.value是響應(yīng)式的，所以如下代碼并不會引起頁面的更新。// name = ref('zhang-san')}function changeAge(){// JS中操作ref對象時候需要.valueage.value += 1 console.log(age.value)}function showTel(){alert(tel)}
</script>

定義對象類型

ref接收的數(shù)據(jù)可以是：基本類型、對象類型。

如果ref接受的是對象類型，內(nèi)部其實是調(diào)用了reactive函數(shù)。所以同樣也是可以處理深層次。

reactive函數(shù)

作用：定義一個響應(yīng)式對象（reactive只能處理對象類型）

語法：let 對象名 = reactive(原對象)

使用方法：

1. 引入reactive
import {reactive} from 'vue'2. 使用reactive
let 對象名 = reactive(原對象)3. 替換整體對象
Object.assign(對象名,{屬性名：屬性值,...})

返回值：一個Proxy的實例對象，簡稱：響應(yīng)式對象。

注意：reactive定義的響應(yīng)式數(shù)據(jù)是“深層次”的。

ref和reactive的區(qū)別

宏觀角度對比：

1. ref用來定義：基本類型數(shù)據(jù)、對象類型數(shù)據(jù)；

2. reactive用來定義：對象類型數(shù)據(jù)。

細(xì)節(jié)對比：

1. ref創(chuàng)建的變量必須使用.value（可以使用volar插件自動添加.value）。
   

2. reactive重新分配一個新對象，會失去響應(yīng)式（可以使用Object.assign去整體替換）。

使用原則：

1. 若需要一個基本類型的響應(yīng)式數(shù)據(jù)，必須使用ref。
2. 若需要一個響應(yīng)式對象，層級不深，ref、reactive都可以。
3. 若需要一個響應(yīng)式對象，且層級較深，推薦使用reactive。

toRef和toRefs

作用：將一個響應(yīng)式對象中的每一個屬性，轉(zhuǎn)換為ref對象。toRefs與toRef功能一致，但toRefs可以批量轉(zhuǎn)換。

語法：

• toRefs(對象名)
• toRef(對象名,屬性名)

使用方法：

1. 導(dǎo)入import {ref,reactive,toRefs,toRef} from 'vue'2. 使用toRefs將解構(gòu)的屬性批量取出
let {屬性值1，屬性值2} = toRefs(對象名)
let 屬性值 = toRef(對象名,屬性名)

例子：

<template><div class="person"><h2>姓名：{{person.name}}</h2><h2>年齡：{{person.age}}</h2><h2>性別：{{person.gender}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年齡</button><button @click="changeGender">修改性別</button></div>
</template><script lang="ts" setup name="Person">import {ref,reactive,toRefs,toRef} from 'vue'// 數(shù)據(jù)let person = reactive({name:'張三', age:18, gender:'男'})// 通過toRefs將person對象中的n個屬性批量取出，且依然保持響應(yīng)式的能力let {name,gender} =  toRefs(person)// 通過toRef將person對象中的gender屬性取出，且依然保持響應(yīng)式的能力let age = toRef(person,'age')// 方法function changeName(){name.value += '~'}function changeAge(){age.value += 1}function changeGender(){gender.value = '女'}
</script>

計算屬性Computed

作用：Computed就是依賴的屬性發(fā)生變化后會被重新計算，根據(jù)已有數(shù)據(jù)計算出新數(shù)據(jù)（和Vue2中的computed作用一致）。

回顧vue2的計算屬性：

<script>export default{computed:{//配置項}
}
</script>

語法模版：

<script>import {computed} from 'vue'let 變量名 = computed(() =>{return 方法體})
</script>

計算屬性的get和set

按照上面的語法模版，計算屬性是只可讀不可修改的，要想讓計算屬性即可讀又可以寫，就需要用到get和set方法。

語法模版：

<script>import {computed} from 'vue'let 變量名 = computed(() =>{//讀取get(){ }set(){ }})
</script>

監(jiān)聽屬性watch

作用：監(jiān)視數(shù)據(jù)的變化（和Vue2中的watch作用一致）。

特點：Vue3中的watch只能監(jiān)視以下四種數(shù)據(jù)：

1. ref定義的數(shù)據(jù)。
2. reactive定義的數(shù)據(jù)。
3. 函數(shù)返回一個值（getter函數(shù)）。
4. 一個包含上述內(nèi)容的數(shù)組。

使用方法：

1. 導(dǎo)入watch

   import {watch} from 'vue'
   

2. 使用watch

   watch(監(jiān)視對象，(newValue,oldValue)=>{//回調(diào)函數(shù)
   }),{配置對象}
   

3. 解除監(jiān)視stopWatch()

   const stopWatch = watch(監(jiān)視對象，(newValue,oldValue)=>{//回調(diào)函數(shù)if(newValue >= 10){stopWatch()}
   })
   

監(jiān)視ref定義的基本類型

監(jiān)視ref定義的【基本類型】數(shù)據(jù)：直接寫數(shù)據(jù)名即可，監(jiān)視的是其value值的改變。

監(jiān)視ref定義的數(shù)據(jù)的時候不用寫.value。

例子：

<template><div class="person"><h1>情況一：監(jiān)視【ref】定義的【基本類型】數(shù)據(jù)</h1><h2>當(dāng)前求和為：{{sum}}</h2><button @click="changeSum">點我sum+1</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 數(shù)據(jù)let sum = ref(0)// 方法function changeSum(){sum.value += 1}// 監(jiān)視，情況一：監(jiān)視【ref】定義的【基本類型】數(shù)據(jù)const stopWatch = watch(sum,(newValue,oldValue)=>{console.log('sum變化了',newValue,oldValue)if(newValue >= 10){stopWatch()}})
</script>

監(jiān)視ref定義的對象類型

監(jiān)視ref定義的【對象類型】數(shù)據(jù)：直接寫數(shù)據(jù)名，監(jiān)視的是對象的【地址值】，若想監(jiān)視對象內(nèi)部的數(shù)據(jù)，要手動開啟深度監(jiān)視。

深度監(jiān)視：

watch(監(jiān)視對象，(newValue,oldValue)=>{//回調(diào)函數(shù)
}),{deep:true}

??注意：

• 若修改的是ref定義的對象中的屬性，newValue 和 oldValue 都是新值，因為它們是同一個對象。

• 若修改整個ref定義的對象，newValue 是新值， oldValue 是舊值，因為不是同一個對象了。

例子：

<template><div class="person"><h1>情況二：監(jiān)視【ref】定義的【對象類型】數(shù)據(jù)</h1><h2>姓名：{{ person.name }}</h2><h2>年齡：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年齡</button><button @click="changePerson">修改整個人</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 數(shù)據(jù)let person = ref({name:'張三',age:18})// 方法function changeName(){person.value.name += '~'}function changeAge(){person.value.age += 1}function changePerson(){person.value = {name:'李四',age:90}}/* 監(jiān)視，情況一：監(jiān)視【ref】定義的【對象類型】數(shù)據(jù)，監(jiān)視的是對象的地址值，若想監(jiān)視對象內(nèi)部屬性的變化，需要手動開啟深度監(jiān)視watch的第一個參數(shù)是：被監(jiān)視的數(shù)據(jù)watch的第二個參數(shù)是：監(jiān)視的回調(diào)watch的第三個參數(shù)是：配置對象（deep、immediate等等.....） */watch(person,(newValue,oldValue)=>{console.log('person變化了',newValue,oldValue)},{deep:true})</script>

監(jiān)聽reactive定義的對象類型

監(jiān)視reactive定義的【對象類型】數(shù)據(jù)，且默認(rèn)開啟了深度監(jiān)視。（隱式的創(chuàng)建了深度監(jiān)聽）。

例子：

<template><div class="person"><h1>情況三：監(jiān)視【reactive】定義的【對象類型】數(shù)據(jù)</h1><h2>姓名：{{ person.name }}</h2><h2>年齡：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年齡</button><button @click="changePerson">修改整個人</button><hr><h2>測試：{{obj.a.b.c}}</h2><button @click="test">修改obj.a.b.c</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 數(shù)據(jù)let person = reactive({name:'張三',age:18})let obj = reactive({a:{b:{c:666}}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changePerson(){Object.assign(person,{name:'李四',age:80})}function test(){obj.a.b.c = 888}// 監(jiān)視，情況三：監(jiān)視【reactive】定義的【對象類型】數(shù)據(jù)，且默認(rèn)是開啟深度監(jiān)視的watch(person,(newValue,oldValue)=>{console.log('person變化了',newValue,oldValue)})watch(obj,(newValue,oldValue)=>{console.log('Obj變化了',newValue,oldValue)})
</script>

監(jiān)聽響應(yīng)式對象的中的某個屬性

監(jiān)視ref或reactive定義的【對象類型】數(shù)據(jù)中的某個屬性，注意點如下：

1. 基本類型的監(jiān)聽，需要寫成函數(shù)形式
   

2. 對象類型的監(jiān)聽，可以直接.屬性，但是最好寫成函數(shù)形式。如果對象堅硬的是地址值，需要管制對象內(nèi)部，需要手動開啟深度監(jiān)聽。

   watch(()=>person.car,(newValue,oldValue)=>{console.log('person.car變化了',newValue,oldValue)},{deep:true})
   

例子：

<template><div class="person"><h1>情況四：監(jiān)視【ref】或【reactive】定義的【對象類型】數(shù)據(jù)中的某個屬性</h1><h2>姓名：{{ person.name }}</h2><h2>年齡：{{ person.age }}</h2><h2>汽車：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年齡</button><button @click="changeC1">修改第一臺車</button><button @click="changeC2">修改第二臺車</button><button @click="changeCar">修改整個車</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 數(shù)據(jù)let person = reactive({name:'張三',age:18,car:{c1:'奔馳',c2:'寶馬'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeC1(){person.car.c1 = '奧迪'}function changeC2(){person.car.c2 = '大眾'}function changeCar(){person.car = {c1:'雅迪',c2:'愛瑪'}}// 監(jiān)視，情況四：監(jiān)視響應(yīng)式對象中的某個屬性，且該屬性是基本類型的，要寫成函數(shù)式/* watch(()=> person.name,(newValue,oldValue)=>{console.log('person.name變化了',newValue,oldValue)}) */// 監(jiān)視，情況四：監(jiān)視響應(yīng)式對象中的某個屬性，且該屬性是對象類型的，可以直接寫，也能寫函數(shù)，更推薦寫函數(shù)</script>

監(jiān)聽多個數(shù)據(jù)

直接使用一個數(shù)組包裹住[]

例子：

<template><div class="person"><h1>情況五：監(jiān)視上述的多個數(shù)據(jù)</h1><h2>姓名：{{ person.name }}</h2><h2>年齡：{{ person.age }}</h2><h2>汽車：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年齡</button><button @click="changeC1">修改第一臺車</button><button @click="changeC2">修改第二臺車</button><button @click="changeCar">修改整個車</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 數(shù)據(jù)let person = reactive({name:'張三',age:18,car:{c1:'奔馳',c2:'寶馬'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeC1(){person.car.c1 = '奧迪'}function changeC2(){person.car.c2 = '大眾'}function changeCar(){person.car = {c1:'雅迪',c2:'愛瑪'}}// 監(jiān)視，情況五：監(jiān)視上述的多個數(shù)據(jù)watch([()=>person.name,person.car],(newValue,oldValue)=>{console.log('person.car變化了',newValue,oldValue)},{deep:true})</script>

watchEffect

立即運行一個函數(shù)，同時響應(yīng)式地追蹤其依賴，并在依賴更改時重新執(zhí)行該函數(shù)。

watch對比watchEffect

1. 都能監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，不同的是監(jiān)聽數(shù)據(jù)變化的方式不同

2. watch：要明確指出監(jiān)視的數(shù)據(jù)

3. watchEffect：不用明確指出監(jiān)視的數(shù)據(jù)（函數(shù)中用到哪些屬性，那就監(jiān)視哪些屬性）。

例子：

<template><div class="person"><h1>需求：水溫達(dá)到50℃，或水位達(dá)到20cm，則聯(lián)系服務(wù)器</h1><h2 id="demo">水溫：{{temp}}</h2><h2>水位：{{height}}</h2><button @click="changePrice">水溫+1</button><button @click="changeSum">水位+10</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch,watchEffect} from 'vue'// 數(shù)據(jù)let temp = ref(0)let height = ref(0)// 方法function changePrice(){temp.value += 10}function changeSum(){height.value += 1}// 用watch實現(xiàn)，需要明確的指出要監(jiān)視：temp、heightwatch([temp,height],(value)=>{// 從value中獲取最新的temp值、height值const [newTemp,newHeight] = value// 室溫達(dá)到50℃，或水位達(dá)到20cm，立刻聯(lián)系服務(wù)器if(newTemp >= 50 || newHeight >= 20){console.log('聯(lián)系服務(wù)器')}})// 用watchEffect實現(xiàn)，不用const stopWtach = watchEffect(()=>{// 室溫達(dá)到50℃，或水位達(dá)到20cm，立刻聯(lián)系服務(wù)器if(temp.value >= 50 || height.value >= 20){console.log(document.getElementById('demo')?.innerText)console.log('聯(lián)系服務(wù)器')}// 水溫達(dá)到100，或水位達(dá)到50，取消監(jiān)視if(temp.value === 100 || height.value === 50){console.log('清理了')stopWtach()}})
</script>

標(biāo)簽中的ref屬性

作用：用于注冊模板引用。

特點：

1. 用在普通DOM標(biāo)簽上，獲取的是DOM節(jié)點。

   <template><div class="person"><h1 ref="title1">尚硅谷</h1><h2 ref="title2">前端</h2><h3 ref="title3">Vue</h3><input type="text" ref="inpt"> <br><br><button @click="showLog">點我打印內(nèi)容</button></div>
   </template><script lang="ts" setup name="Person">import {ref} from 'vue'let title1 = ref()let title2 = ref()let title3 = ref()function showLog(){// 通過id獲取元素const t1 = document.getElementById('title1')// 打印內(nèi)容console.log((t1 as HTMLElement).innerText)console.log((<HTMLElement>t1).innerText)console.log(t1?.innerText)/************************************/// 通過ref獲取元素console.log(title1.value)console.log(title2.value)console.log(title3.value)}
   </script>
   

2. 用在組件標(biāo)簽上，獲取的是組件實例對象。

   <!-- 父組件App.vue -->
   <template><Person ref="ren"/><button @click="test">測試</button>
   </template><script lang="ts" setup name="App">import Person from './components/Person.vue'import {ref} from 'vue'let ren = ref()function test(){console.log(ren.value.name)console.log(ren.value.age)}
   </script><!-- 子組件Person.vue中要使用defineExpose暴露內(nèi)容 -->
   <script lang="ts" setup name="Person">import {ref,defineExpose} from 'vue'// 數(shù)據(jù)let name = ref('張三')let age = ref(18)/****************************/// 使用defineExpose將組件中的數(shù)據(jù)交給外部defineExpose({name,age})
   </script>
   

生命周期

概念：Vue組件實例在創(chuàng)建時要經(jīng)歷一系列的初始化步驟，在此過程中Vue會在合適的時機，調(diào)用特定的函數(shù)，從而讓開發(fā)者有機會在特定階段運行自己的代碼，這些特定的函數(shù)統(tǒng)稱為：生命周期鉤子。

時刻：生命周期整體分為四個階段，分別是：創(chuàng)建、掛載、更新、銷毀，每個階段都有兩個鉤子，一前一后。

vue2的生命周期：

• 創(chuàng)建階段：beforeCreate（創(chuàng)建前）、created（創(chuàng)建完畢）

• 掛載階段：beforeMount（掛載前）、mounted（掛載完畢）

• 更新階段：beforeUpdate（更新前）、updated（更新完畢）

• 銷毀階段：beforeDestroy（銷毀前）、destroyed（銷毀完畢）

vue2 中的生命周期函數(shù)卸載methods方法中。

vue3的生命周期：

• 創(chuàng)建階段：setup

• 掛載階段：onBeforeMount、onMounted

• 更新階段：onBeforeUpdate、onUpdated

• 卸載階段：onBeforeUnmount、onUnmounted

使用方法：

1. 導(dǎo)入import {生命周期函數(shù)} from 'vue'
2. 使用生命周期函數(shù)(()=>{//方法體})

例子：

<template><div class="person"><h2>當(dāng)前求和為：{{ sum }}</h2><button @click="changeSum">點我sum+1</button></div>
</template><!-- vue3寫法 -->
<script lang="ts" setup name="Person">import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'// 數(shù)據(jù)let sum = ref(0)// 方法function changeSum() {sum.value += 1}console.log('setup')// 生命周期鉤子onBeforeMount(()=>{console.log('掛載之前')})onMounted(()=>{console.log('掛載完畢')})onBeforeUpdate(()=>{console.log('更新之前')})onUpdated(()=>{console.log('更新完畢')})onBeforeUnmount(()=>{console.log('卸載之前')})onUnmounted(()=>{console.log('卸載完畢')})
</script>

自定義hooks

屬于是一個模塊化開發(fā)，本質(zhì)是一個函數(shù)，把setup函數(shù)中使用的Composition API進(jìn)行了封裝，類似于vue2.x中的mixin。

自定義hook的優(yōu)勢：復(fù)用代碼, 讓setup中的邏輯更清楚易懂。

例子：

• useSum.ts中內(nèi)容如下：

  import {ref,onMounted} from 'vue'export default function(){let sum = ref(0)const increment = ()=>{sum.value += 1}const decrement = ()=>{sum.value -= 1}onMounted(()=>{increment()})//向外部暴露數(shù)據(jù)return {sum,increment,decrement}
  }		
  

• useDog.ts中內(nèi)容如下：

  import {reactive,onMounted} from 'vue'
  import axios,{AxiosError} from 'axios'export default function(){let dogList = reactive<string[]>([])// 方法async function getDog(){try {// 發(fā)請求let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')// 維護數(shù)據(jù)dogList.push(data.message)} catch (error) {// 處理錯誤const err = <AxiosError>errorconsole.log(err.message)}}// 掛載鉤子onMounted(()=>{getDog()})//向外部暴露數(shù)據(jù)return {dogList,getDog}
  }
  

• 組件中具體使用：

  <template><h2>當(dāng)前求和為：{{sum}}</h2><button @click="increment">點我+1</button><button @click="decrement">點我-1</button><hr><img v-for="(u,index) in dogList.urlList" :key="index" :src="(u as string)"> <span v-show="dogList.isLoading">加載中......</span><br><button @click="getDog">再來一只狗</button>
  </template><script lang="ts">import {defineComponent} from 'vue'export default defineComponent({name:'App',})
  </script><script setup lang="ts">import useSum from './hooks/useSum'import useDog from './hooks/useDog'let {sum,increment,decrement} = useSum()let {dogList,getDog} = useDog()
  </script>
  

路由

1. 安裝Vue-router

   npm i vue-router
   

2. 在src下新建一個router文件夾在里面書寫路由代碼

3. 創(chuàng)建路由器，并暴露出去

   //第一步：引入creatRouter
   import {createRouter,createWebHistory} from 'vue-router'//第三步：引入可能呈現(xiàn)的組件
   import Home from '@/.vue路徑'//第二步：創(chuàng)建路由器
   const router = createRouter({
   history:createWebHistory(),//指定工作模式routes:[{path:'/home',component:Home},]
   })//第四步：暴露路由
   export default router
   

4. 在main.js中配置路由器

   // 引入createApp用于創(chuàng)建應(yīng)用
   import {createApp} from 'vue'
   // 引入App根組件
   import App from './App.vue'//第一步：引入路由器
   import router from './router'//創(chuàng)建一個應(yīng)用
   const app = createApp(App)//第二步：使用路由器
   app.use(router)//掛載整個應(yīng)用到app容器中
   app.mount('#app')
   

5. 在App.vue展示

   <template><RouterView</RouterView>
   </template>
   <script>//第一步導(dǎo)入路由import {RouterLink,RouterView} from 'vue-router'  
   </script>
   

6. 實現(xiàn)路由跳轉(zhuǎn)

   <template><!-- 導(dǎo)航區(qū) --><RouterLink to="/文件路徑" >首頁</RouterLink><!-- 展示區(qū) --><RouterView</RouterView>
   </template>
   <script>//第一步導(dǎo)入路由import {RouterLink,RouterView} from 'vue-router'  
   </script>
   

7. 使用active-class，實現(xiàn)點擊切換class

   <RouterLink to="/home" active-class="active">首頁</RouterLink>
   

注意??：

1. 路由組件通常存放在pages 或 views文件夾，一般組件通常存放在components文件夾。

2. 通過點擊導(dǎo)航，視覺效果上“消失” 了的路由組件，默認(rèn)是被卸載掉的，需要的時候再去掛載。

路由工作模式

1. history模式

   • 優(yōu)點：URL更加美觀，不帶有#，更接近傳統(tǒng)的網(wǎng)站URL。

   • 缺點：后期項目上線，需要服務(wù)端配合處理路徑問題，否則刷新會有404錯誤。

     const router = createRouter({history:createWebHistory(), //history模式/******/
     })
     

2. hash模式

   • 優(yōu)點：兼容性更好，因為不需要服務(wù)器端處理路徑。

   • 缺點：URL帶有#不太美觀，且在SEO優(yōu)化方面相對較差。

     const router = createRouter({history:createWebHashHistory(), //hash模式/******/
     })
     

to的兩種寫法

1. 字符串寫法：

   <!-- 第一種：to的字符串寫法 -->
   <router-link active-class="active" to="/home">主頁</router-link>
   

2. 對象寫法：

   <!-- 第二種：to的對象寫法 -->
   <router-link active-class="active" :to="{path:'/path路徑 或者 名字跳轉(zhuǎn)'}">Home</router-link>
   

命名路由

作用：可以簡化路由跳轉(zhuǎn)及傳參（后面就講）。

給路由規(guī)則命名：

routes:[{name:'zhuye',path:'/home',component:Home},
]

嵌套路由

寫法注意：

• 子集不用寫/

使用方法：

1. 配置路由規(guī)則，使用children配置

   {name:'',path:'/home',component:Home,children:[{path:'子路由',	//子集不用寫`/`component:子路由}]
   }
   

2. 跳轉(zhuǎn)路由

   <router-link to="/父級路由/子集路由">xxxx</router-link>
   <!-- 或 -->
   <router-link to="{path:'/父級路由/子集路由'}">xxxx</router-link>
   

路由傳參

query參數(shù)

語法：

<router-link to="/父級路由/子集路由?后面?zhèn)鬟fquery參數(shù)">xxxx</router-link>

使用方法：

為了讓query參數(shù)傳遞的是一個動態(tài)的值，我們需要用到j(luò)s的模版字符串，來動態(tài)獲取參數(shù)、

1. 在to的前面加一個冒號：，是該句話變成表達(dá)式

   <router-link :to="/父級路由/子集路由?后面?zhèn)鬟fquery參數(shù)">xxxx</router-link>
   

2. 使用反引號`` 將to的值引起來，然后在里面使用模版字符串${}

   <router-link :to="`/父級路由/子集路由?id=${獲取id的值.id}`">xxxx</router-link>
   

3. 如果后面還有參數(shù)可以使用&拼接

   <router-link to="/news/detail?a=1&b=2&content=歡迎你">跳轉(zhuǎn)
   </router-link>
   

4. 精簡寫法，使用to的對象寫法

   <RouterLink :to="{//name:'xiang', //用name也可以跳轉(zhuǎn)path:'/news/detail',query:{id:news.id,title:news.title,content:news.content}}"
   >{{news.title}}
   </RouterLink>
   

獲取query參數(shù)的方法：

1. 引入useRoute

   import {useRoute} from 'vue-router'
   

2. 創(chuàng)建一個useRoute對象

   let route =useRoute()
   

3. 獲取query參數(shù)

   route.query.屬性名
   

4. 還可以搭配toRefs解構(gòu)出Route對象

   <template><p>query.屬性名	<!-- 第三步：去掉route --></p>
   </template><script>import {useRoute} from 'vue-router'import {toRefs} from 'vue'	//第一步：導(dǎo)入toRefslet route =useRoute()let {query} =  toRefs(route)	//第二步：搭配`toRefs`解構(gòu)出Route對象
   </script>
   

params參數(shù)

語法：

<router-link to="/父級路由/子集路由/后面?zhèn)鬟fparams參數(shù)1/params參數(shù)2/...">xxxx</router-link>

使用方法：

1. 傳遞參數(shù)

   <!-- 跳轉(zhuǎn)并攜帶params參數(shù)（to的字符串寫法） -->
   <RouterLink :to="`/news/detail/001/新聞001/內(nèi)容001`">{{news.title}}</RouterLink>
   

   <!-- 跳轉(zhuǎn)并攜帶params參數(shù)（to的對象寫法） -->
   <RouterLink :to="{name:'xiang', //用name跳轉(zhuǎn)，只能用name，不能用pathparams:{id:news.id,title:news.title,content:news.title}}"
   >{{news.title}}
   </RouterLink>
   

2. 配置路由

   

3. 接收參數(shù)

   import {useRoute} from 'vue-router'
   const route = useRoute()
   // 打印params參數(shù)
   console.log(route.params)
   

注意??：

1. 傳遞params參數(shù)時，若使用to的對象寫法，必須使用name配置項，不能用path。

2. 傳遞params參數(shù)時，需要提前在規(guī)則中占位。

3. params傳參不能傳遞對象和數(shù)組。
   

4. 如果有些參數(shù)可傳可不傳，則需要在路由規(guī)則中的占位后面加一個？。
   

路由的props

params參數(shù)作為props

作用：讓路由組件更方便的收到參數(shù)，可以將路由收到得到所有params參數(shù)作為props傳給路由組件。

使用方法：直接在路由規(guī)則后面添加一個props;true。

children:[{path:'子路由',	//子集不用寫`/`component:子路由，props:true,		}
]

例子：

直接使用：

自定義props

自定義寫法就可以指定是使用params參數(shù)還是query參數(shù)。

函數(shù)寫法

作用：把返回的對象中每一組key-value作為props傳給路由組件

語法：

props(route){return Route.query
}

例子：

對象寫法

作用：把對象中的每一組key-value作為props傳給路由組件

props:{a:100,b:200,...
}

不推薦?這種寫法，因為會把數(shù)據(jù)寫死。

replace屬性

作用：控制路由跳轉(zhuǎn)時操作瀏覽器歷史記錄的模式。

語法：在RouterLink標(biāo)簽中添加replace屬性即可。

<RouterLink replace .......>News</RouterLink>

瀏覽器的歷史記錄有兩種寫入方式：分別為push和replace：

• push是追加歷史記錄（默認(rèn)值）。
• replace是替換當(dāng)前記錄。

編程式導(dǎo)航

知識引入：在上面的頁面中，都是使用<RouterLink>來實現(xiàn)頁面跳轉(zhuǎn)的，但是<RouterLink>是vue里面的標(biāo)簽，并不是瀏覽器中所謂的html標(biāo)簽，所以瀏覽器無法識別，只有通過vue最終將<RouterLink>轉(zhuǎn)化為a標(biāo)簽。所以如果你只會使用<RouterLink>來實現(xiàn)跳轉(zhuǎn)，那么就說明你的頁面全是a標(biāo)簽，但是這樣就會限制一些功能，導(dǎo)致一些需求無法實現(xiàn)。所以這就引出了我們的編程式導(dǎo)航來實現(xiàn)。

簡單來說就是脫離<RouterLink>實現(xiàn)跳轉(zhuǎn)。

使用方法：

1. 導(dǎo)入useRouter

   import {useRouter} from 'vue-router'
   

2. 調(diào)用路由器

   const router = useRouter()
   

3. 實現(xiàn)跳轉(zhuǎn)

   router.push('/路徑')
   <!--可以是push跳轉(zhuǎn)或者replace跳轉(zhuǎn)-->
   

例子：實現(xiàn)一個定時器跳轉(zhuǎn)

router.push()括號內(nèi)的參數(shù)與<RouterLink>中的to寫法一樣：

1. 字符串寫法
2. 對象寫法

route和router

路由組件的兩個重要的屬性：$route和$router變成了兩個hooks

import {useRoute,useRouter} from 'vue-router'const route = useRoute()
const router = useRouter()console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)

重定向

作用：將特定的路徑，重新定向到已有路由。

語法：

{path:'/',redirect:'/路徑'
}

Pinia狀態(tài)管理

多個組件共享數(shù)據(jù)，才使用到pinia。

搭建pinia環(huán)境

搭建方法：

1. 安裝pinia環(huán)境

   npm install pinia
   

2. 引入pinia

   import { createApp } from 'vue'
   import App from './App.vue'/* 第一步：引入createPinia，用于創(chuàng)建pinia */
   import { createPinia } from 'pinia'/* 第二步：創(chuàng)建pinia */
   const pinia = createPinia()
   const app = createApp(App)/* 第三步：使用插件 */{}
   app.use(pinia)
   app.mount('#app')
   

存儲數(shù)據(jù)

Store是一個保存：狀態(tài)、業(yè)務(wù)邏輯 的實體，每個組件都可以讀取、寫入它。

它有三個概念：state、getter、action，相當(dāng)于組件中的： data、 computed 和 methods。

使用方法：

1. 新建一個store文件夾，用來存儲數(shù)據(jù)

2. 引入defineStore用于創(chuàng)建store

   import {defineStore} from 'pinia'// 定義并暴露一個store
   export const useCountStore = defineStore('count',{// 動作actions:{},// 狀態(tài)state(){return {sum:6}},// 計算getters:{}
   })
   

3. 組件中使用state數(shù)據(jù)

   <template><h2>當(dāng)前求和為：{{ sumStore.sum }}</h2>
   </template><script setup lang="ts" name="Count">// 引入對應(yīng)的useXxxxxStore	import {useSumStore} from '@/store/sum'// 調(diào)用useXxxxxStore得到對應(yīng)的storeconst sumStore = useSumStore()
   </script>
   

修改數(shù)據(jù)

第一種方法：直接修改法

countStore.sum = 666

第二種方法：批量修改法

countStore.$patch({sum:999,school:'atguigu'
})

第三種方式：借助action修改，在action當(dāng)中可以編寫一些業(yè)務(wù)邏輯

import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {// actions里面放置的是一個一個的方法，用于響應(yīng)組件中的“動作”/*actions: {increment(){console.log("increment被調(diào)用了",value)*/}//加increment(value:number) {if (this.sum < 10) {//操作countStore中的sum，this是當(dāng)前的storethis.sum += value}},//減decrement(value:number){if(this.sum > 1){this.sum -= value}}},/*************/
})

然后再組件中調(diào)用action即可

// 使用countStore
const countStore = useCountStore()// 調(diào)用對應(yīng)action
countStore.incrementOdd(n.value)

storeToRefs

借助storeToRefs將store中的數(shù)據(jù)轉(zhuǎn)為ref對象，方便在模板中使用。

注意：pinia提供的storeToRefs只會將數(shù)據(jù)做轉(zhuǎn)換，而Vue的toRefs會轉(zhuǎn)換store中數(shù)據(jù)。

<template><div class="count"><h2>當(dāng)前求和為：{{sum}}</h2></div>
</template><script setup lang="ts" name="Count">import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs轉(zhuǎn)換countStore，隨后解構(gòu) */const {sum} = storeToRefs(countStore)
</script>

getters

概念：當(dāng)state中的數(shù)據(jù)，需要經(jīng)過處理后再使用時，可以使用getters配置。

使用方法：

1. 追加getters配置

   // 引入defineStore用于創(chuàng)建store
   import {defineStore} from 'pinia'// 定義并暴露一個store
   export const useCountStore = defineStore('count',{// 動作actions:{/************/},// 狀態(tài)state(){return {sum:1,school:'atguigu'}},// 計算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}}
   })
   

2. 組件中讀取數(shù)據(jù)

   const {increment,decrement} = countStore
   let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)
   

偵聽state

通過store的$subscribe()方法偵聽state及其變化。

語法：

store.$subsctibe((mutate,state)=>{// 方法體
})

• mutate：本次修改的信息
• state：真正的數(shù)據(jù)

應(yīng)用場景：

可以用來保存localStorage

talkStore.$subscribe((mutate,state)=>{localStorage.setItem('talk',JSON.stringify(talkList.value))
})

需要對store中的數(shù)據(jù)進(jìn)行修改

原來：

修改后：

解決一開始沒有數(shù)據(jù)的問題：

store組合式寫法

先來看見選項式寫法：

組合式寫法：

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'export const useTalkStore = defineStore('talk',()=>{// talkList就是stateconst talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])// getATalk函數(shù)相當(dāng)于actionasync function getATalk(){// 發(fā)請求，下面這行的寫法是：連續(xù)解構(gòu)賦值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把請求回來的字符串，包裝成一個對象let obj = {id:nanoid(),title}// 放到數(shù)組中talkList.unshift(obj)}return {talkList,getATalk}
})

組件通信

Vue3組件通信和Vue2的區(qū)別：

• 移出事件總線，使用mitt代替。

• vuex換成了pinia。
• 把.sync優(yōu)化到了v-model里面了。
• 把$listeners所有的東西，合并到$attrs中了。
• $children被砍掉了。

常見使用方法：

props

概述：props是使用頻率最高的一種通信方式，常用與 ：父 ? 子。

• 若 父傳子：屬性值是非函數(shù)。
• 若 子傳父：屬性值是函數(shù)。

父傳子案例：

子傳父案例：

自定義事件

概述：自定義事件常用于：子 => 父。

使用方法：

1. 在父組件中給子組件綁定自定義事件

   <Child @send-toy="toy = $event"/>
   

2. 子組件聲明事件

   const emit = defineEmits(['send-toy'])
   

3. 子組件中，觸發(fā)事件

區(qū)分原生事件和自定義事件：

• 原生事件：
  • 事件名是特定的（click、mosueenter等）
  • 事件嗲了$event：是包含事件相關(guān)的信息對象（pageX、pageY、target、keyCode）
• 自定義事件：
  • 事件名是任意名稱
  • 事件對象$event：是調(diào)用emit的時候所提供的數(shù)據(jù)，可以是任意類型。

案例：

事件名命名規(guī)范：

官方推薦使用肉串命名法來命名事件名。

mitt

概述：與消息訂閱與發(fā)布（pubsub）功能類似，可以實現(xiàn)任意組件間通信。

配置方法：

1. 安裝mitt

   npm i mitt
   

2. 新建文件：src\utils\emitter.ts，用來存放mitt文件

3. 編寫mitt模版

   // 引入mitt 
   import mitt from "mitt";
   // 創(chuàng)建emitter
   const emitter = mitt()
   // 創(chuàng)建并暴露mitt
   export default emitter精簡寫法：
   import mitt from "mitt";
   export default = mitt()
   

4. 在main.js中引入emitter

   import emitter from '@/路徑'
   

使用方法：

1. 提供數(shù)據(jù)的組件，在合適的時候觸發(fā)事件。
   

2. 在組件卸載的時候最后解綁一下mitt事件，這樣做的目的是減小內(nèi)存。

   onUnmounted(()=>{emitter.off('事件名')
   })
   

mitt綁定事件

語法：

emitter.on('事件名',()=>{//方法體
})

mitt觸發(fā)事件

語法：

emitter.emit('事件名')

mitt解綁事件

語法：

emitter.off('事件名')
//全部解綁
emitter.all.clear()

$attrs

概述：$attrs是一個對象，包含所有父組件傳入的標(biāo)簽屬性，$attrs用于實現(xiàn)當(dāng)前組件的父組件，向當(dāng)前組件的子組件通信（祖→孫）。

使用方法：

parent

概述：

• $refs：值為對象，包含所有被ref屬性標(biāo)識的DOM元素或組件實例?！居糜?：父→子】
• $parent：值為對象，當(dāng)前組件的父組件實例對象。【用于：子→父**】

祖孫通信——provide、inject

概述：實現(xiàn)祖孫組件直接通信。

使用方法：

1. 在祖先組件中插入provide，向后代提供數(shù)據(jù)

   import {provide} from 'vue';	//導(dǎo)入provide
   provide('變量標(biāo)識名',變量)	//一般來說變量標(biāo)識名和變量名相同
   

2. 在后代組件中是通過inject配置來聲明接收數(shù)據(jù)

   import {inject} from 'vue';	//導(dǎo)入inject
   let 接收變量名 = inject('變量標(biāo)識名',嗎，默認(rèn)值)	//一般來說接收變量名和變量標(biāo)識名相同
   

v-model (了解)

（?_?）這一部分沒看懂。

概述：實現(xiàn) 父?子 之間相互通信，經(jīng)常用自定義UI組件庫。

1. 前序知識 —— v-model的本質(zhì)

   <!-- 使用v-model指令 -->
   <input type="text" v-model="userName"><!-- v-model的本質(zhì)是下面這行代碼 -->
   <input type="text" :value="userName" @input="userName =(<HTMLInputElement>$event.target).value"
   >
   

2. 組件標(biāo)簽上的v-model的本質(zhì)：:moldeValue ＋ update:modelValue事件。

   <!-- 組件標(biāo)簽上使用v-model指令 -->
   <AtguiguInput v-model="userName"/><!-- 組件標(biāo)簽上v-model的本質(zhì) -->
   <AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>
   

   AtguiguInput組件中：

   <template><div class="box"><!--將接收的value值賦給input元素的value屬性，目的是：為了呈現(xiàn)數(shù)據(jù) --><!--給input元素綁定原生input事件，觸發(fā)input事件時，進(jìn)而觸發(fā)update:model-value事件--><input type="text" :value="modelValue" @input="emit('update:model-value',$event.target.value)"></div>
   </template><script setup lang="ts" name="AtguiguInput">// 接收propsdefineProps(['modelValue'])// 聲明事件const emit = defineEmits(['update:model-value'])
   </script>
   

3. 也可以更換value，例如改成abc

   <!-- 也可以更換value，例如改成abc-->
   <AtguiguInput v-model:abc="userName"/><!-- 上面代碼的本質(zhì)如下 -->
   <AtguiguInput :abc="userName" @update:abc="userName = $event"/>
   

   AtguiguInput組件中：

   <template><div class="box"><input type="text" :value="abc" @input="emit('update:abc',$event.target.value)"></div>
   </template><script setup lang="ts" name="AtguiguInput">// 接收propsdefineProps(['abc'])// 聲明事件const emit = defineEmits(['update:abc'])
   </script>
   

4. 如果value可以更換，那么就可以在組件標(biāo)簽上多次使用v-model

   <AtguiguInput v-model:abc="userName" v-model:xyz="password"/>
   

（?_?）

$event到底是啥？啥時候能用.target

• 對于原生事件，$event就是事件對象–>能用.target
• 對于自定義事件，$event就是觸發(fā)事件，所以傳遞的是數(shù)據(jù)–>不能.target

插槽

默認(rèn)插槽

前置知識：

具名插槽

語法：

<組件名 v-slot:插槽名稱>標(biāo)簽結(jié)構(gòu)</組件名>推薦寫法：
<組件名><template v-slot:插槽名稱>標(biāo)簽結(jié)構(gòu)</template>
</組件名>使用：
<slot name="插槽名稱">內(nèi)容</slot>

語法糖：#代表v-slot:

作用域插槽

概述：數(shù)據(jù)在組件的自身，單根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來決定。UI組件庫大量使用作用域插槽來實現(xiàn)。

使用方法：

1. 在子組件的插槽中傳值給父組件

   <slot :傳值="變量" ></slot>
   

2. 父組件中接收插槽穿過來的數(shù)據(jù)

   <template v-slot="params">//標(biāo)簽內(nèi)容
   </template>
   

案例：

父組件中：<Game v-slot="params"><!--可以直接解構(gòu)出來：<Game v-slot="{games}">--><!-- <Game v-slot:default="params"> --><!-- <Game #default="params"> --><ul><li v-for="g in params.games" :key="g.id">{{ g.name }}</li><!--解構(gòu)出來使用：v-for="g in games"--></ul></Game>子組件中：<template><div class="category"><h2>今日游戲榜單</h2><slot :games="games" a="哈哈"></slot></div></template><script setup lang="ts" name="Category">import {reactive} from 'vue'let games = reactive([{id:'asgdytsa01',name:'英雄聯(lián)盟'},{id:'asgdytsa02',name:'王者榮耀'},{id:'asgdytsa03',name:'紅色警戒'},{id:'asgdytsa04',name:'斗羅大陸'}])</script>

其他API

shallowRef與shallowReactive

shallowRef

作用：創(chuàng)建一個響應(yīng)式數(shù)據(jù)，但只對頂層屬性進(jìn)行響應(yīng)式處理。

語法：

let 變量名 = shallowRef()

特點：只跟蹤引用值的變化，不關(guān)心值內(nèi)部的屬性變化。

案例：

shallowReactive

作用：創(chuàng)建一個淺層響應(yīng)式對象，只會使對象的最頂層屬性變成響應(yīng)式的，對象內(nèi)部的嵌套屬性則不會變成響應(yīng)式的。

語法：

const myObj = shallowReactive({ ... });

特點：對象的頂層屬性是響應(yīng)式的，但嵌套對象的屬性不是。比shallowRef性能比較好。

總結(jié)（摘自官方）

通過使用 shallowRef() 和 shallowReactive() 來繞開深度響應(yīng)。淺層式 API 創(chuàng)建的狀態(tài)只在其頂層是響應(yīng)式的，對所有深層的對象不會做任何處理，避免了對每一個內(nèi)部屬性做響應(yīng)式所帶來的性能成本，這使得屬性的訪問變得更快，可提升性能。

readonly和shallowReadonly

readonly

作用：用于創(chuàng)建一個對象的深只讀副本。

語法：readonly(變量名)

使用方法：

const original = reactive({ ... });
const readOnlyCopy = readonly(original);

特點：

• 對象的所有的嵌套屬性都將變?yōu)?strong>只讀
• 任何倉儲處修改這個對象的操作都會被阻止（在開發(fā)模式下，還會在控制臺發(fā)出警告）

應(yīng)用場景：

• 創(chuàng)建不可變的狀態(tài)快照。
• 保護全局狀態(tài)或配置不被修改

shallowReadonly

作用：與readonly類似，但只有作用于對象的頂層屬性。

語法：shallowReadonly()

使用方法：

const original = reactive({ ... });
const shallowReadOnlyCopy = shallowReadonly(original);

特點：

• 只將對象的頂層屬性設(shè)置為只讀，對象內(nèi)部的嵌套屬性仍然可變。
• 適用于只需保護對象頂層屬性的場景。

toRaw和markRaw

toRaw

作用：用于獲取一個響應(yīng)式對象的原始對象， toRaw 返回的對象不再是響應(yīng)式的，不會觸發(fā)視圖更新。

案例：

使用場景：

在需要將響應(yīng)式對象傳遞給非 Vue 的庫或外部系統(tǒng)時，使用 toRaw 可以確保它們收到的是普通對象。

markRaw

作用：標(biāo)記一個對象，使其永遠(yuǎn)不會變成響應(yīng)式。

語法：markRaw()

案例：

/* markRaw */
let citys = markRaw([{id:'asdda01',name:'北京'},{id:'asdda02',name:'上海'},{id:'asdda03',name:'天津'},{id:'asdda04',name:'重慶'}
])
// 根據(jù)原始對象citys去創(chuàng)建響應(yīng)式對象citys2 —— 創(chuàng)建失敗，因為citys被markRaw標(biāo)記了
let citys2 = reactive(citys)

自定義Ref

引入：使用Vue提供的默認(rèn)ref定義響應(yīng)式數(shù)據(jù)，數(shù)據(jù)一變，頁面就更新

作用：創(chuàng)建一個自定義的ref，并對其依賴項跟蹤和更新觸發(fā)進(jìn)行邏輯控制。

語法：customRef()

模版：

let msg = customRef((track,trigger)=>{
// track（跟蹤）、trigger（觸發(fā)）return{// get在被msg讀取的時候調(diào)用get(){track()	//告訴Vue數(shù)據(jù)msg很重要，你要對msg進(jìn)行持續(xù)關(guān)注，一旦msg變化就去更新return 返回值},// set在被msg修改的時候調(diào)用set(value){	//value是修改值//方法體trigger()	//通知Vue一下數(shù)據(jù)msg變化了}}
})

實現(xiàn)一個防抖效果Hooks

import {customRef } from "vue";
// initValue：初始時間
// delay:延遲時間
export default function(initValue:string,delay:number){let msg = customRef((track,trigger)=>{let timer:numberreturn {get(){track() // 告訴Vue數(shù)據(jù)msg很重要，要對msg持續(xù)關(guān)注，一旦變化就更新return initValue},set(value){clearTimeout(timer)timer = setTimeout(() => {initValue = valuetrigger() //通知Vue數(shù)據(jù)msg變化了}, delay);}}}) return {msg}
}

使用Hooks：

Teleport傳送（?_?）

概念：Teleport 是一種能夠?qū)⑽覀兊?strong>組件html結(jié)構(gòu)移動到指定位置的技術(shù)。

案例：

<teleport to='body' ><div class="modal" v-show="isShow"><h2>我是一個彈窗</h2><p>我是彈窗中的一些內(nèi)容</p><button @click="isShow = false">關(guān)閉彈窗</button></div>
</teleport>

Suspense（?_?）

等待異步組件時渲染一些額外內(nèi)容，讓應(yīng)用有更好的用戶體驗。

使用步驟：

• 異步引入組件
• 使用Suspense包裹組件，并配置好default 與 fallback

案例：

import { defineAsyncComponent,Suspense } from "vue";
const Child = defineAsyncComponent(()=>import('./Child.vue'))

<template><div class="app"><h3>我是App組件</h3><Suspense><template v-slot:default><Child/></template><template v-slot:fallback><h3>加載中.......</h3></template></Suspense></div>
</template>

全局API轉(zhuǎn)移到應(yīng)用對象

app.component：全局注冊組件

app.config：全局配置對象

app.directive：注冊全局指令

app.mount：掛載應(yīng)用

app.unmount：卸載應(yīng)用

app.use：安裝插件