1. Vue3簡介
-
2020年9月18日，
Vue.js發布版3.0版本，代號：One Piece（n -
經歷了：4800+次提交、40+個RFC、600+次PR、300+貢獻者
-
官方發版地址：Release v3.0.0 One Piece · vuejs/core
-
截止2023年10月，最新的公開版本為：
3.3.4
1.1. 【性能的提升】
-
打包大小減少
41%。 -
初次渲染快
55%, 更新渲染快133%。 -
內存減少
54%。
1.2.【 源碼的升級】
-
使用
Proxy代替defineProperty實現響應式。 -
重寫虛擬
DOM的實現和Tree-Shaking。
1.3. 【擁抱TypeScript】
Vue3可以更好的支持TypeScript。
1.4. 【新的特性】
-
Composition API（組合API）：-
setup -
ref與reactive -
computed與watch…
-
-
新的內置組件：
-
Fragment -
Teleport -
Suspense…
-
-
其他改變：
-
新的生命周期鉤子
-
data選項應始終被聲明為一個函數 -
移除
keyCode支持作為v-on的修飾符…
-
2. 創建Vue3工程
2.1. 【基于 vue-cli 創建】
點擊查看官方文檔
備注：目前
vue-cli已處于維護模式，官方推薦基于Vite創建項目。
## 查看@vue/cli版本，確保@vue/cli版本在4.5.0以上
vue --version## 安裝或者升級你的@vue/cli
npm install -g @vue/cli## 執行創建命令
vue create vue_test## 隨后選擇3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x## 啟動
cd vue_test
npm run serve
2.2. 【基于 vite 創建】(推薦)
vite 是新一代前端構建工具，官網地址：https://vitejs.cn，vite的優勢如下：
- 輕量快速的熱重載（
HMR），能實現極速的服務啟動。 - 對
TypeScript、JSX、CSS等支持開箱即用。 - 真正的按需編譯，不再等待整個應用編譯完成。
webpack構建 與vite構建對比圖如下：
- 具體操作如下（點擊查看官方文檔）
## 1.創建命令
npm create vue@latest## 2.具體配置
## 配置項目名稱
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由環境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia環境
√ 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
自己動手編寫一個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>
安裝官方推薦的vscode插件：
總結：
Vite項目中，index.html是項目的入口文件，在項目最外層。- 加載
index.html后，Vite解析<script type="module" src="xxx">指向的JavaScript。 Vue3**中是通過 **createApp函數創建一個應用實例。
2.3. 【一個簡單的效果】
Vue3向下兼容Vue2語法，且Vue3中的模板中可以沒有根標簽
<template><div class="person"><h2>姓名：{{name}}</h2><h2>年齡：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年齡+1</button><button @click="showTel">點我查看聯系方式</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>
3. Vue3核心語法
3.1. 【OptionsAPI 與 CompositionAPI】
Vue2的API設計是Options（配置）風格的。Vue3的API設計是Composition（組合）風格的。
Options API 的弊端
Options類型的 API，數據、方法、計算屬性等，是分散在：data、methods、computed中的，若想新增或者修改一個需求，就需要分別修改：data、methods、computed，不便于維護和復用。
Composition API 的優勢
可以用函數的方式，更加優雅的組織代碼，讓相關功能的代碼更加有序的組織在一起。
說明：以上四張動圖原創作者：大帥老猿
3.2. 【拉開序幕的 setup】
setup 概述
setup是Vue3中一個新的配置項，值是一個函數，它是 Composition API “表演的舞臺”，組件中所用到的：數據、方法、計算屬性、監視…等等，均配置在setup中。
特點如下：
setup函數返回的對象中的內容，可直接在模板中使用。setup中訪問this是undefined。setup函數會在beforeCreate之前調用，它是“領先”所有鉤子執行的。
<template><div class="person"><h2>姓名：{{name}}</h2><h2>年齡：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年齡+1</button><button @click="showTel">點我查看聯系方式</button></div>
</template><script lang="ts">export default {name:'Person',setup(){// 數據，原來寫在data中（注意：此時的name、age、tel數據都不是響應式數據）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 的返回值
- 若返回一個對象：則對象中的：屬性、方法等，在模板中均可以直接使用**（重點關注）。**
- 若返回一個函數：則可以自定義渲染內容，代碼如下：
setup(){return ()=> '你好啊！'
}
setup 與 Options API 的關系
Vue2的配置（data、methos…）中可以訪問到setup中的屬性、方法。- 但在
setup中不能訪問到Vue2的配置（data、methos…）。 - 如果與
Vue2沖突，則setup優先。
setup 語法糖
setup函數有一個語法糖，這個語法糖，可以讓我們把setup獨立出去，代碼如下：
<template><div class="person"><h2>姓名：{{name}}</h2><h2>年齡：{{age}}</h2><button @click="changName">修改名字</button><button @click="changAge">年齡+1</button><button @click="showTel">點我查看聯系方式</button></div>
</template><script lang="ts">export default {name:'Person',}
</script><!-- 下面的寫法是setup語法糖 -->
<script setup lang="ts">console.log(this) //undefined// 數據（注意：此時的name、age、tel都不是響應式數據）let name = '張三'let age = 18let tel = '13888888888'// 方法function changName(){name = '李四'//注意：此時這么修改name頁面是不變化的}function changAge(){console.log(age)age += 1 //注意：此時這么修改age頁面是不變化的}function showTel(){alert(tel)}
</script>
擴展：上述代碼，還需要編寫一個不寫setup的script標簽，去指定組件名字，比較麻煩，我們可以借助vite中的插件簡化
- 第一步：
npm i vite-plugin-vue-setup-extend -D - 第二步：
vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({plugins: [ VueSetupExtend() ]
})
- 第三步：
<script setup lang="ts" name="Person">
3.3. 【ref 創建：基本類型的響應式數據】
- **作用：**定義響應式變量。
- 語法：
let xxx = ref(初始值)。 - **返回值：**一個
RefImpl的實例對象，簡稱ref對象或ref，ref對象的value屬性是響應式的。 - 注意點：
JS中操作數據需要：xxx.value，但模板中不需要.value，直接使用即可。- 對于
let name = ref('張三')來說，name不是響應式的，name.value是響應式的。
<template><div class="person"><h2>姓名：{{name}}</h2><h2>年齡：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年齡+1</button><button @click="showTel">點我查看聯系方式</button></div>
</template><script setup lang="ts" name="Person">import {ref} from 'vue'// name和age是一個RefImpl的實例對象，簡稱ref對象，它們的value屬性是響應式的。let name = ref('張三')let age = ref(18)// tel就是一個普通的字符串，不是響應式的let tel = '13888888888'function changeName(){// JS中操作ref對象時候需要.valuename.value = '李四'console.log(name.value)// 注意：name不是響應式的，name.value是響應式的，所以如下代碼并不會引起頁面的更新。// name = ref('zhang-san')}function changeAge(){// JS中操作ref對象時候需要.valueage.value += 1 console.log(age.value)}function showTel(){alert(tel)}
</script>
3.4. 【reactive 創建：對象類型的響應式數據】
- 作用：定義一個響應式對象（基本類型不要用它，要用
ref，否則報錯） - 語法：
let 響應式對象= reactive(源對象)。 - **返回值：**一個
Proxy的實例對象，簡稱：響應式對象。 - 注意點：
reactive定義的響應式數據是“深層次”的。
<template><div class="person"><h2>汽車信息：一臺{{ car.brand }}汽車，價值{{ car.price }}萬</h2><h2>游戲列表：</h2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul><h2>測試：{{obj.a.b.c.d}}</h2><button @click="changeCarPrice">修改汽車價格</button><button @click="changeFirstGame">修改第一游戲</button><button @click="test">測試</button></div>
</template><script lang="ts" setup name="Person">
import { reactive } from 'vue'// 數據
let car = reactive({ brand: '奔馳', price: 100 })
let games = reactive([{ id: 'ahsgdyfa01', name: '英雄聯盟' },{ id: 'ahsgdyfa02', name: '王者榮耀' },{ id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({a:{b:{c:{d:666}}}
})function changeCarPrice() {car.price += 10
}
function changeFirstGame() {games[0].name = '流星蝴蝶劍'
}
function test(){obj.a.b.c.d = 999
}
</script>
3.5. 【ref 創建：對象類型的響應式數據】
- 其實
ref接收的數據可以是：基本類型、對象類型。 - 若
ref接收的是對象類型，內部其實也是調用了reactive函數。
<template><div class="person"><h2>汽車信息：一臺{{ car.brand }}汽車，價值{{ car.price }}萬</h2><h2>游戲列表：</h2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul><h2>測試：{{obj.a.b.c.d}}</h2><button @click="changeCarPrice">修改汽車價格</button><button @click="changeFirstGame">修改第一游戲</button><button @click="test">測試</button></div>
</template><script lang="ts" setup name="Person">
import { ref } from 'vue'// 數據
let car = ref({ brand: '奔馳', price: 100 })
let games = ref([{ id: 'ahsgdyfa01', name: '英雄聯盟' },{ id: 'ahsgdyfa02', name: '王者榮耀' },{ id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({a:{b:{c:{d:666}}}
})console.log(car)function changeCarPrice() {car.value.price += 10
}
function changeFirstGame() {games.value[0].name = '流星蝴蝶劍'
}
function test(){obj.value.a.b.c.d = 999
}
</script>
3.6. 【ref 對比 reactive】
宏觀角度看：
ref用來定義：基本類型數據、對象類型數據；
reactive用來定義：對象類型數據。
- 區別：
ref創建的變量必須使用.value（可以使用volar插件自動添加.value）。
reactive重新分配一個新對象，會失去響應式（可以使用Object.assign去整體替換）。
- 使用原則：
- 若需要一個基本類型的響應式數據，必須使用
ref。- 若需要一個響應式對象，層級不深，
ref、reactive都可以。- 若需要一個響應式對象，且層級較深，推薦使用
reactive。
3.7. 【toRefs 與 toRef】
- 作用：將一個響應式對象中的每一個屬性，轉換為
ref對象。 - 備注：
toRefs與toRef功能一致，但toRefs可以批量轉換。 - 語法如下：
<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'// 數據let person = reactive({name:'張三', age:18, gender:'男'})// 通過toRefs將person對象中的n個屬性批量取出，且依然保持響應式的能力let {name,gender} = toRefs(person)// 通過toRef將person對象中的gender屬性取出，且依然保持響應式的能力let age = toRef(person,'age')// 方法function changeName(){name.value += '~'}function changeAge(){age.value += 1}function changeGender(){gender.value = '女'}
</script>
3.8. 【computed】
作用：根據已有數據計算出新數據（和Vue2中的computed作用一致）。
<template><div class="person">姓：<input type="text" v-model="firstName"> <br>名：<input type="text" v-model="lastName"> <br>全名：<span>{{fullName}}</span> <br><button @click="changeFullName">全名改為：li-si</button></div>
</template><script setup lang="ts" name="App">import {ref,computed} from 'vue'let firstName = ref('zhang')let lastName = ref('san')// 計算屬性——只讀取，不修改/* let fullName = computed(()=>{return firstName.value + '-' + lastName.value}) */// 計算屬性——既讀取又修改let fullName = computed({// 讀取get(){return firstName.value + '-' + lastName.value},// 修改set(val){console.log('有人修改了fullName',val)firstName.value = val.split('-')[0]lastName.value = val.split('-')[1]}})function changeFullName(){fullName.value = 'li-si'}
</script>
3.9.【watch】
- 作用：監視數據的變化（和
Vue2中的watch作用一致） - 特點：
Vue3中的watch只能監視以下四種數據：
ref定義的數據。reactive定義的數據。- 函數返回一個值（
getter函數）。- 一個包含上述內容的數組。
我們在Vue3中使用watch的時候，通常會遇到以下幾種情況：
* 情況一
監視ref定義的【基本類型】數據：直接寫數據名即可，監視的是其value值的改變。
<template><div class="person"><h1>情況一：監視【ref】定義的【基本類型】數據</h1><h2>當前求和為：{{sum}}</h2><button @click="changeSum">點我sum+1</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 數據let sum = ref(0)// 方法function changeSum(){sum.value += 1}// 監視，情況一：監視【ref】定義的【基本類型】數據const stopWatch = watch(sum,(newValue,oldValue)=>{console.log('sum變化了',newValue,oldValue)if(newValue >= 10){stopWatch()}})
</script>
* 情況二
監視ref定義的【對象類型】數據：直接寫數據名，監視的是對象的【地址值】，若想監視對象內部的數據，要手動開啟深度監視。
注意：
若修改的是
ref定義的對象中的屬性，newValue和oldValue都是新值，因為它們是同一個對象。若修改整個
ref定義的對象，newValue是新值，oldValue是舊值，因為不是同一個對象了。
<template><div class="person"><h1>情況二：監視【ref】定義的【對象類型】數據</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'// 數據let person = ref({name:'張三',age:18})// 方法function changeName(){person.value.name += '~'}function changeAge(){person.value.age += 1}function changePerson(){person.value = {name:'李四',age:90}}/* 監視，情況一：監視【ref】定義的【對象類型】數據，監視的是對象的地址值，若想監視對象內部屬性的變化，需要手動開啟深度監視watch的第一個參數是：被監視的數據watch的第二個參數是：監視的回調watch的第三個參數是：配置對象（deep、immediate等等.....） */watch(person,(newValue,oldValue)=>{console.log('person變化了',newValue,oldValue)},{deep:true})</script>
* 情況三
監視reactive定義的【對象類型】數據，且默認開啟了深度監視。
<template><div class="person"><h1>情況三：監視【reactive】定義的【對象類型】數據</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'// 數據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}// 監視，情況三：監視【reactive】定義的【對象類型】數據，且默認是開啟深度監視的watch(person,(newValue,oldValue)=>{console.log('person變化了',newValue,oldValue)})watch(obj,(newValue,oldValue)=>{console.log('Obj變化了',newValue,oldValue)})
</script>
* 情況四
監視ref或reactive定義的【對象類型】數據中的某個屬性，注意點如下：
- 若該屬性值不是【對象類型】，需要寫成函數形式。
- 若該屬性值是依然是【對象類型】，可直接編，也可寫成函數，建議寫成函數。
結論：監視的要是對象里的屬性，那么最好寫函數式，注意點：若是對象監視的是地址值，需要關注對象內部，需要手動開啟深度監視。
<template><div class="person"><h1>情況四：監視【ref】或【reactive】定義的【對象類型】數據中的某個屬性</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'// 數據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:'愛瑪'}}// 監視，情況四：監視響應式對象中的某個屬性，且該屬性是基本類型的，要寫成函數式/* watch(()=> person.name,(newValue,oldValue)=>{console.log('person.name變化了',newValue,oldValue)}) */// 監視，情況四：監視響應式對象中的某個屬性，且該屬性是對象類型的，可以直接寫，也能寫函數，更推薦寫函數watch(()=>person.car,(newValue,oldValue)=>{console.log('person.car變化了',newValue,oldValue)},{deep:true})
</script>
* 情況五
監視上述的多個數據
<template><div class="person"><h1>情況五：監視上述的多個數據</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'// 數據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:'愛瑪'}}// 監視，情況五：監視上述的多個數據watch([()=>person.name,person.car],(newValue,oldValue)=>{console.log('person.car變化了',newValue,oldValue)},{deep:true})</script>
3.10. 【watchEffect】
-
官網：立即運行一個函數，同時響應式地追蹤其依賴，并在依賴更改時重新執行該函數。
-
watch對比watchEffect-
都能監聽響應式數據的變化，不同的是監聽數據變化的方式不同
-
watch：要明確指出監視的數據 -
watchEffect：不用明確指出監視的數據（函數中用到哪些屬性，那就監視哪些屬性）。
-
-
示例代碼：
<template><div class="person"><h1>需求：水溫達到50℃，或水位達到20cm，則聯系服務器</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'// 數據let temp = ref(0)let height = ref(0)// 方法function changePrice(){temp.value += 10}function changeSum(){height.value += 1}// 用watch實現，需要明確的指出要監視：temp、heightwatch([temp,height],(value)=>{// 從value中獲取最新的temp值、height值const [newTemp,newHeight] = value// 室溫達到50℃，或水位達到20cm，立刻聯系服務器if(newTemp >= 50 || newHeight >= 20){console.log('聯系服務器')}})// 用watchEffect實現，不用const stopWtach = watchEffect(()=>{// 室溫達到50℃，或水位達到20cm，立刻聯系服務器if(temp.value >= 50 || height.value >= 20){console.log(document.getElementById('demo')?.innerText)console.log('聯系服務器')}// 水溫達到100，或水位達到50，取消監視if(temp.value === 100 || height.value === 50){console.log('清理了')stopWtach()}}) </script>
3.11. 【標簽的 ref 屬性】
作用：用于注冊模板引用。
用在普通
DOM標簽上，獲取的是DOM節點。用在組件標簽上，獲取的是組件實例對象。
用在普通DOM標簽上：
<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">點我打印內容</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')// 打印內容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>
用在組件標簽上：
<!-- 父組件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暴露內容 -->
<script lang="ts" setup name="Person">import {ref,defineExpose} from 'vue'// 數據let name = ref('張三')let age = ref(18)/****************************//****************************/// 使用defineExpose將組件中的數據交給外部defineExpose({name,age})
</script>
3.12. 【props】
// 定義一個接口，限制每個Person對象的格式 export interface PersonInter {id:string,name:string,age:number}// 定義一個自定義類型Persons export type Persons = Array<PersonInter>
App.vue中代碼：<template><Person :list="persons"/> </template><script lang="ts" setup name="App">import Person from './components/Person.vue'import {reactive} from 'vue'import {type Persons} from './types'let persons = reactive<Persons>([{id:'e98219e12',name:'張三',age:18},{id:'e98219e13',name:'李四',age:19},{id:'e98219e14',name:'王五',age:20}])</script>
Person.vue中代碼：<template> <div class="person"><ul><li v-for="item in list" :key="item.id">{{item.name}}--{{item.age}}</li></ul></div></template><script lang="ts" setup name="Person"> import {defineProps} from 'vue' import {type PersonInter} from '@/types'// 第一種寫法：僅接收 // const props = defineProps(['list'])// 第二種寫法：接收+限制類型 // defineProps<{list:Persons}>()// 第三種寫法：接收+限制類型+指定默認值+限制必要性 let props = withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{id:'asdasg01',name:'小豬佩奇',age:18}]})console.log(props)</script>
3.13. 【生命周期】
-
概念：
Vue組件實例在創建時要經歷一系列的初始化步驟，在此過程中Vue會在合適的時機，調用特定的函數，從而讓開發者有機會在特定階段運行自己的代碼，這些特定的函數統稱為：生命周期鉤子 -
規律：
生命周期整體分為四個階段，分別是：創建、掛載、更新、銷毀，每個階段都有兩個鉤子，一前一后。
-
Vue2的生命周期創建階段：
beforeCreate、created掛載階段：
beforeMount、mounted更新階段：
beforeUpdate、updated銷毀階段：
beforeDestroy、destroyed -
Vue3的生命周期創建階段：
setup掛載階段：
onBeforeMount、onMounted更新階段：
onBeforeUpdate、onUpdated卸載階段：
onBeforeUnmount、onUnmounted -
常用的鉤子：
onMounted(掛載完畢)、onUpdated(更新完畢)、onBeforeUnmount(卸載之前) -
示例代碼：
<template><div class="person"><h2>當前求和為：{{ 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'// 數據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>
3.14. 【自定義hook】
-
什么是
hook？—— 本質是一個函數，把setup函數中使用的Composition API進行了封裝，類似于vue2.x中的mixin。 -
自定義
hook的優勢：復用代碼, 讓setup中的邏輯更清楚易懂。
示例代碼：
-
useSum.ts中內容如下：import {ref,onMounted} from 'vue'export default function(){let sum = ref(0)const increment = ()=>{sum.value += 1}const decrement = ()=>{sum.value -= 1}onMounted(()=>{increment()})//向外部暴露數據return {sum,increment,decrement} } -
useDog.ts中內容如下：import {reactive,onMounted} from 'vue' import axios,{AxiosError} from 'axios'export default function(){let dogList = reactive<string[]>([])// 方法async function getDog(){try {// 發請求let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')// 維護數據dogList.push(data.message)} catch (error) {// 處理錯誤const err = <AxiosError>errorconsole.log(err.message)}}// 掛載鉤子onMounted(()=>{getDog()})//向外部暴露數據return {dogList,getDog} } -
組件中具體使用：
<template><h2>當前求和為：{{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>
4. 路由
4.1. 【對路由的理解】
4.2. 【基本切換效果】
-
Vue3中要使用vue-router的最新版本，目前是4版本。 -
路由配置文件代碼如下：
import {createRouter,createWebHistory} from 'vue-router' import Home from '@/pages/Home.vue' import News from '@/pages/News.vue' import About from '@/pages/About.vue'const router = createRouter({history:createWebHistory(),routes:[{path:'/home',component:Home},{path:'/about',component:About}] }) export default router
-
main.ts代碼如下：import router from './router/index' app.use(router)app.mount('#app')
-
App.vue代碼如下<template><div class="app"><h2 class="title">Vue路由測試</h2><!-- 導航區 --><div class="navigate"><RouterLink to="/home" active-class="active">首頁</RouterLink><RouterLink to="/news" active-class="active">新聞</RouterLink><RouterLink to="/about" active-class="active">關于</RouterLink></div><!-- 展示區 --><div class="main-content"><RouterView></RouterView></div></div> </template><script lang="ts" setup name="App">import {RouterLink,RouterView} from 'vue-router' </script>
4.3. 【兩個注意點】
路由組件通常存放在
pages或views文件夾，一般組件通常存放在components文件夾。通過點擊導航，視覺效果上“消失” 了的路由組件，默認是被卸載掉的，需要的時候再去掛載。
4.4.【路由器工作模式】
-
history模式優點：
URL更加美觀，不帶有#，更接近傳統的網站URL。缺點：后期項目上線，需要服務端配合處理路徑問題，否則刷新會有
404錯誤。const router = createRouter({history:createWebHistory(), //history模式/******/ }) -
hash模式優點：兼容性更好，因為不需要服務器端處理路徑。
缺點：
URL帶有#不太美觀，且在SEO優化方面相對較差。const router = createRouter({history:createWebHashHistory(), //hash模式/******/ })
4.5. 【to的兩種寫法】
<!-- 第一種：to的字符串寫法 -->
<router-link active-class="active" to="/home">主頁</router-link><!-- 第二種：to的對象寫法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>
4.6. 【命名路由】
作用：可以簡化路由跳轉及傳參（后面就講）。
給路由規則命名：
routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,},{name:'guanyu',path:'/about',component:About}
]
跳轉路由：
<!--簡化前：需要寫完整的路徑（to的字符串寫法） -->
<router-link to="/news/detail">跳轉</router-link><!--簡化后：直接通過名字跳轉（to的對象寫法配合name屬性） -->
<router-link :to="{name:'guanyu'}">跳轉</router-link>
4.7. 【嵌套路由】
-
編寫
News的子路由：Detail.vue -
配置路由規則，使用
children配置項：const router = createRouter({history:createWebHistory(),routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail',component:Detail}]},{name:'guanyu',path:'/about',component:About}] }) export default router -
跳轉路由（記得要加完整路徑）：
<router-link to="/news/detail">xxxx</router-link> <!-- 或 --> <router-link :to="{path:'/news/detail'}">xxxx</router-link> -
記得去
Home組件中預留一個<router-view><template><div class="news"><nav class="news-list"><RouterLink v-for="news in newsList" :key="news.id" :to="{path:'/news/detail'}">{{news.name}}</RouterLink></nav><div class="news-detail"><RouterView/></div></div> </template>
4.8. 【路由傳參】
query參數
-
傳遞參數
<!-- 跳轉并攜帶query參數（to的字符串寫法） --> <router-link to="/news/detail?a=1&b=2&content=歡迎你">跳轉 </router-link><!-- 跳轉并攜帶query參數（to的對象寫法） --> <RouterLink :to="{//name:'xiang', //用name也可以跳轉path:'/news/detail',query:{id:news.id,title:news.title,content:news.content}}" >{{news.title}} </RouterLink> -
接收參數：
import {useRoute} from 'vue-router' const route = useRoute() // 打印query參數 console.log(route.query)
params參數
-
傳遞參數
<!-- 跳轉并攜帶params參數（to的字符串寫法） --> <RouterLink :to="`/news/detail/001/新聞001/內容001`">{{news.title}}</RouterLink><!-- 跳轉并攜帶params參數（to的對象寫法） --> <RouterLink :to="{name:'xiang', //用name跳轉params:{id:news.id,title:news.title,content:news.title}}" >{{news.title}} </RouterLink> -
接收參數：
import {useRoute} from 'vue-router' const route = useRoute() // 打印params參數 console.log(route.params)
備注1：傳遞
params參數時，若使用to的對象寫法，必須使用name配置項，不能用path。備注2：傳遞
params參數時，需要提前在規則中占位。
4.9. 【路由的props配置】
作用：讓路由組件更方便的收到參數（可以將路由參數作為props傳給組件）
{name:'xiang',path:'detail/:id/:title/:content',component:Detail,// props的對象寫法，作用：把對象中的每一組key-value作為props傳給Detail組件// props:{a:1,b:2,c:3}, // props的布爾值寫法，作用：把收到了每一組params參數，作為props傳給Detail組件// props:true// props的函數寫法，作用：把返回的對象中每一組key-value作為props傳給Detail組件props(route){return route.query}
}
4.10. 【 replace屬性】
-
作用：控制路由跳轉時操作瀏覽器歷史記錄的模式。
-
瀏覽器的歷史記錄有兩種寫入方式：分別為
push和replace：push是追加歷史記錄（默認值）。replace是替換當前記錄。
-
開啟
replace模式：<RouterLink replace .......>News</RouterLink>
4.11. 【編程式導航】
路由組件的兩個重要的屬性：$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)
4.12. 【重定向】
-
作用：將特定的路徑，重新定向到已有路由。
-
具體編碼：
{path:'/',redirect:'/about' }
5. pinia
5.1【準備一個效果】
5.2【搭建 pinia 環境】
第一步：npm install pinia
第二步：操作src/main.ts
import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia，用于創建pinia */
import { createPinia } from 'pinia'/* 創建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')
此時開發者工具中已經有了pinia選項
5.3【存儲+讀取數據】
-
Store是一個保存：狀態、業務邏輯 的實體，每個組件都可以讀取、寫入它。 -
它有三個概念：
state、getter、action，相當于組件中的：data、computed和methods。 -
具體編碼：
src/store/count.ts// 引入defineStore用于創建store import {defineStore} from 'pinia'// 定義并暴露一個store export const useCountStore = defineStore('count',{// 動作actions:{},// 狀態state(){return {sum:6}},// 計算getters:{} }) -
具體編碼：
src/store/talk.ts// 引入defineStore用于創建store import {defineStore} from 'pinia'// 定義并暴露一個store export const useTalkStore = defineStore('talk',{// 動作actions:{},// 狀態state(){return {talkList:[{id:'yuysada01',content:'你今天有點怪，哪里怪？怪好看的！'},{id:'yuysada02',content:'草莓、藍莓、蔓越莓，你想我了沒？'},{id:'yuysada03',content:'心里給你留了一塊地，我的死心塌地'}]}},// 計算getters:{} }) -
組件中使用
state中的數據<template><h2>當前求和為：{{ sumStore.sum }}</h2> </template><script setup lang="ts" name="Count">// 引入對應的useXxxxxStore import {useSumStore} from '@/store/sum'// 調用useXxxxxStore得到對應的storeconst sumStore = useSumStore() </script><template><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.content }}</li></ul> </template><script setup lang="ts" name="Count">import axios from 'axios'import {useTalkStore} from '@/store/talk'const talkStore = useTalkStore() </script>
5.4.【修改數據】(三種方式)
-
第一種修改方式，直接修改
countStore.sum = 666 -
第二種修改方式：批量修改
countStore.$patch({sum:999,school:'atguigu' }) -
第三種修改方式：借助
action修改（action中可以編寫一些業務邏輯）import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {/*************/actions: {//加increment(value:number) {if (this.sum < 10) {//操作countStore中的sumthis.sum += value}},//減decrement(value:number){if(this.sum > 1){this.sum -= value}}},/*************/ }) -
組件中調用
action即可// 使用countStore const countStore = useCountStore()// 調用對應action countStore.incrementOdd(n.value)
5.5.【storeToRefs】
- 借助
storeToRefs將store中的數據轉為ref對象，方便在模板中使用。 - 注意：
pinia提供的storeToRefs只會將數據做轉換，而Vue的toRefs會轉換store中數據。
<template><div class="count"><h2>當前求和為：{{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轉換countStore，隨后解構 */const {sum} = storeToRefs(countStore)
</script>5.6.【getters】
-
概念：當
state中的數據，需要經過處理后再使用時，可以使用getters配置。 -
追加
getters配置。// 引入defineStore用于創建store import {defineStore} from 'pinia'// 定義并暴露一個store export const useCountStore = defineStore('count',{// 動作actions:{/************/},// 狀態state(){return {sum:1,school:'atguigu'}},// 計算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}} }) -
組件中讀取數據：
const {increment,decrement} = countStore let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)
5.7.【$subscribe】
通過 store 的 $subscribe() 方法偵聽 state 及其變化
talkStore.$subscribe((mutate,state)=>{console.log('LoveTalk',mutate,state)localStorage.setItem('talk',JSON.stringify(talkList.value))
})
5.8. 【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函數相當于actionasync function getATalk(){// 發請求，下面這行的寫法是：連續解構賦值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把請求回來的字符串，包裝成一個對象let obj = {id:nanoid(),title}// 放到數組中talkList.unshift(obj)}return {talkList,getATalk}
})
6. 組件通信
Vue3組件通信和Vue2的區別：
- 移出事件總線，使用
mitt代替。
vuex換成了pinia。- 把
.sync優化到了v-model里面了。 - 把
$listeners所有的東西，合并到$attrs中了。 $children被砍掉了。
常見搭配形式：
6.1. 【props】
概述：props是使用頻率最高的一種通信方式，常用與 ：父 ? 子。
- 若 父傳子：屬性值是非函數。
- 若 子傳父：屬性值是函數。
父組件：
<template><div class="father"><h3>父組件，</h3><h4>我的車：{{ car }}</h4><h4>兒子給的玩具：{{ toy }}</h4><Child :car="car" :getToy="getToy"/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import { ref } from "vue";// 數據const car = ref('奔馳')const toy = ref()// 方法function getToy(value:string){toy.value = value}
</script>
子組件
<template><div class="child"><h3>子組件</h3><h4>我的玩具：{{ toy }}</h4><h4>父給我的車：{{ car }}</h4><button @click="getToy(toy)">玩具給父親</button></div>
</template><script setup lang="ts" name="Child">import { ref } from "vue";const toy = ref('奧特曼')defineProps(['car','getToy'])
</script>
6.2. 【自定義事件】
- 概述：自定義事件常用于：子 => 父。
- 注意區分好：原生事件、自定義事件。
- 原生事件：
- 事件名是特定的（
click、mosueenter等等） - 事件對象
$event: 是包含事件相關信息的對象（pageX、pageY、target、keyCode）
- 事件名是特定的（
- 自定義事件：
- 事件名是任意名稱
- 事件對象
$event: 是調用emit時所提供的數據，可以是任意類型！！！
-
示例：
<!--在父組件中，給子組件綁定自定義事件：--> <Child @send-toy="toy = $event"/><!--注意區分原生事件與自定義事件中的$event--> <button @click="toy = $event">測試</button>//子組件中，觸發事件： this.$emit('send-toy', 具體數據)
6.3. 【mitt】
概述：與消息訂閱與發布（pubsub）功能類似，可以實現任意組件間通信。
安裝mitt
npm i mitt
新建文件：src\utils\emitter.ts
// 引入mitt
import mitt from "mitt";// 創建emitter
const emitter = mitt()/*// 綁定事件emitter.on('abc',(value)=>{console.log('abc事件被觸發',value)})emitter.on('xyz',(value)=>{console.log('xyz事件被觸發',value)})setInterval(() => {// 觸發事件emitter.emit('abc',666)emitter.emit('xyz',777)}, 1000);setTimeout(() => {// 清理事件emitter.all.clear()}, 3000);
*/// 創建并暴露mitt
export default emitter
接收數據的組件中：綁定事件、同時在銷毀前解綁事件：
import emitter from "@/utils/emitter";
import { onUnmounted } from "vue";// 綁定事件
emitter.on('send-toy',(value)=>{console.log('send-toy事件被觸發',value)
})onUnmounted(()=>{// 解綁事件emitter.off('send-toy')
})
【第三步】：提供數據的組件，在合適的時候觸發事件
import emitter from "@/utils/emitter";function sendToy(){// 觸發事件emitter.emit('send-toy',toy.value)
}
注意這個重要的內置關系，總線依賴著這個內置關系
6.4.【v-model】
-
概述：實現 父?子 之間相互通信。
-
前序知識 ——
v-model的本質<!-- 使用v-model指令 --> <input type="text" v-model="userName"><!-- v-model的本質是下面這行代碼 --> <input type="text" :value="userName" @input="userName =(<HTMLInputElement>$event.target).value" > -
組件標簽上的
v-model的本質：:moldeValue＋update:modelValue事件。<!-- 組件標簽上使用v-model指令 --> <AtguiguInput v-model="userName"/><!-- 組件標簽上v-model的本質 --> <AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>AtguiguInput組件中：<template><div class="box"><!--將接收的value值賦給input元素的value屬性，目的是：為了呈現數據 --><!--給input元素綁定原生input事件，觸發input事件時，進而觸發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> -
也可以更換
value，例如改成abc<!-- 也可以更換value，例如改成abc--> <AtguiguInput v-model:abc="userName"/><!-- 上面代碼的本質如下 --> <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> -
如果
value可以更換，那么就可以在組件標簽上多次使用v-model<AtguiguInput v-model:abc="userName" v-model:xyz="password"/>
6.5.【$attrs 】
-
概述：
$attrs用于實現當前組件的父組件，向當前組件的子組件通信（祖→孫）。 -
具體說明：
$attrs是一個對象，包含所有父組件傳入的標簽屬性。注意：
$attrs會自動排除props中聲明的屬性(可以認為聲明過的props被子組件自己“消費”了)
父組件：
<template><div class="father"><h3>父組件</h3><Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import { ref } from "vue";let a = ref(1)let b = ref(2)let c = ref(3)let d = ref(4)function updateA(value){a.value = value}
</script>
子組件：
<template><div class="child"><h3>子組件</h3><GrandChild v-bind="$attrs"/></div>
</template><script setup lang="ts" name="Child">import GrandChild from './GrandChild.vue'
</script>
孫組件：
<template><div class="grand-child"><h3>孫組件</h3><h4>a：{{ a }}</h4><h4>b：{{ b }}</h4><h4>c：{{ c }}</h4><h4>d：{{ d }}</h4><h4>x：{{ x }}</h4><h4>y：{{ y }}</h4><button @click="updateA(666)">點我更新A</button></div>
</template><script setup lang="ts" name="GrandChild">defineProps(['a','b','c','d','x','y','updateA'])
</script>
6.6. 【 r e f s 、 refs、 refs、parent】
-
概述：
$refs用于 ：父→子。$parent用于：子→父。
-
原理如下：
屬性 說明 $refs值為對象，包含所有被 ref屬性標識的DOM元素或組件實例。$parent值為對象，當前組件的父組件實例對象。
6.7. 【provide、inject】
-
概述：實現祖孫組件直接通信
-
具體使用：
- 在祖先組件中通過
provide配置向后代組件提供數據 - 在后代組件中通過
inject配置來聲明接收數據
- 在祖先組件中通過
-
具體編碼：
【第一步】父組件中，使用
provide提供數據<template><div class="father"><h3>父組件</h3><h4>資產：{{ money }}</h4><h4>汽車：{{ car }}</h4><button @click="money += 1">資產+1</button><button @click="car.price += 1">汽車價格+1</button><Child/></div> </template><script setup lang="ts" name="Father">import Child from './Child.vue'import { ref,reactive,provide } from "vue";// 數據let money = ref(100)let car = reactive({brand:'奔馳',price:100})// 用于更新money的方法function updateMoney(value:number){money.value += value}// 提供數據provide('moneyContext',{money,updateMoney})provide('car',car) </script>注意：子組件中不用編寫任何東西，是不受到任何打擾的
【第二步】孫組件中使用
inject配置項接受數據。<template><div class="grand-child"><h3>我是孫組件</h3><h4>資產：{{ money }}</h4><h4>汽車：{{ car }}</h4><button @click="updateMoney(6)">點我</button></div> </template><script setup lang="ts" name="GrandChild">import { inject } from 'vue';// 注入數據let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})let car = inject('car')
6.8. 【pinia】
參考之前pinia部分的講解
6.9. 【slot】
1. 默認插槽
父組件中：<Category title="今日熱門游戲"><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></Category>
子組件中：<template><div class="item"><h3>{{ title }}</h3><!-- 默認插槽 --><slot></slot></div></template>
2. 具名插槽
父組件中：<Category title="今日熱門游戲"><template v-slot:s1><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></template><template #s2><a href="">更多</a></template></Category>
子組件中：<template><div class="item"><h3>{{ title }}</h3><slot name="s1"></slot><slot name="s2"></slot></div></template>
3. 作用域插槽
-
理解：數據在組件的自身，但根據數據生成的結構需要組件的使用者來決定。（新聞數據在
News組件中，但使用數據所遍歷出來的結構由App組件決定） -
具體編碼：
父組件中：<Game v-slot="params"><!-- <Game v-slot:default="params"> --><!-- <Game #default="params"> --><ul><li v-for="g in params.games" :key="g.id">{{ g.name }}</li></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:'英雄聯盟'},{id:'asgdytsa02',name:'王者榮耀'},{id:'asgdytsa03',name:'紅色警戒'},{id:'asgdytsa04',name:'斗羅大陸'}])</script>
7. 其它 API
7.1.【shallowRef 與 shallowReactive 】
shallowRef
-
作用：創建一個響應式數據，但只對頂層屬性進行響應式處理。
-
用法：
let myVar = shallowRef(initialValue); -
特點：只跟蹤引用值的變化，不關心值內部的屬性變化。
shallowReactive
-
作用：創建一個淺層響應式對象，只會使對象的最頂層屬性變成響應式的，對象內部的嵌套屬性則不會變成響應式的
-
用法：
const myObj = shallowReactive({ ... }); -
特點：對象的頂層屬性是響應式的，但嵌套對象的屬性不是。
總結
通過使用
shallowRef()和shallowReactive()來繞開深度響應。淺層式API創建的狀態只在其頂層是響應式的，對所有深層的對象不會做任何處理，避免了對每一個內部屬性做響應式所帶來的性能成本，這使得屬性的訪問變得更快，可提升性能。
7.2.【readonly 與 shallowReadonly】
readonly
-
作用：用于創建一個對象的深只讀副本。
-
用法：
const original = reactive({ ... }); const readOnlyCopy = readonly(original); -
特點：
- 對象的所有嵌套屬性都將變為只讀。
- 任何嘗試修改這個對象的操作都會被阻止（在開發模式下，還會在控制臺中發出警告）。
-
應用場景：
- 創建不可變的狀態快照。
- 保護全局狀態或配置不被修改。
shallowReadonly
-
作用：與
readonly類似，但只作用于對象的頂層屬性。 -
用法：
const original = reactive({ ... }); const shallowReadOnlyCopy = shallowReadonly(original); -
特點：
-
只將對象的頂層屬性設置為只讀，對象內部的嵌套屬性仍然是可變的。
-
適用于只需保護對象頂層屬性的場景。
-
7.3.【toRaw 與 markRaw】
toRaw
-
作用：用于獲取一個響應式對象的原始對象，
toRaw返回的對象不再是響應式的，不會觸發視圖更新。官網描述：這是一個可以用于臨時讀取而不引起代理訪問/跟蹤開銷，或是寫入而不觸發更改的特殊方法。不建議保存對原始對象的持久引用，請謹慎使用。
何時使用？ —— 在需要將響應式對象傳遞給非
Vue的庫或外部系統時，使用toRaw可以確保它們收到的是普通對象 -
具體編碼：
import { reactive,toRaw,markRaw,isReactive } from "vue";/* toRaw */ // 響應式對象 let person = reactive({name:'tony',age:18}) // 原始對象 let rawPerson = toRaw(person)/* markRaw */ let citysd = markRaw([{id:'asdda01',name:'北京'},{id:'asdda02',name:'上海'},{id:'asdda03',name:'天津'},{id:'asdda04',name:'重慶'} ]) // 根據原始對象citys去創建響應式對象citys2 —— 創建失敗，因為citys被markRaw標記了 let citys2 = reactive(citys) console.log(isReactive(person)) console.log(isReactive(rawPerson)) console.log(isReactive(citys)) console.log(isReactive(citys2))
markRaw
-
作用：標記一個對象，使其永遠不會變成響應式的。
例如使用
mockjs時，為了防止誤把mockjs變為響應式對象，可以使用markRaw去標記mockjs -
編碼：
/* markRaw */ let citys = markRaw([{id:'asdda01',name:'北京'},{id:'asdda02',name:'上海'},{id:'asdda03',name:'天津'},{id:'asdda04',name:'重慶'} ]) // 根據原始對象citys去創建響應式對象citys2 —— 創建失敗，因為citys被markRaw標記了 let citys2 = reactive(citys)
7.4.【customRef】
作用：創建一個自定義的ref，并對其依賴項跟蹤和更新觸發進行邏輯控制。
實現防抖效果（useSumRef.ts）：
import {customRef } from "vue";export default function(initValue:string,delay:number){let msg = customRef((track,trigger)=>{let timer:numberreturn {get(){track() // 告訴Vue數據msg很重要，要對msg持續關注，一旦變化就更新return initValue},set(value){clearTimeout(timer)timer = setTimeout(() => {initValue = valuetrigger() //通知Vue數據msg變化了}, delay);}}}) return {msg}
}
組件中使用：
8. Vue3新組件
8.1. 【Teleport】
- 什么是Teleport？—— Teleport 是一種能夠將我們的組件html結構移動到指定位置的技術。
<teleport to='body' ><div class="modal" v-show="isShow"><h2>我是一個彈窗</h2><p>我是彈窗中的一些內容</p><button @click="isShow = false">關閉彈窗</button></div>
</teleport>
8.2. 【Suspense】
- 等待異步組件時渲染一些額外內容，讓應用有更好的用戶體驗
- 使用步驟：
- 異步引入組件
- 使用
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>
8.3.【全局API轉移到應用對象】
app.componentapp.configapp.directiveapp.mountapp.unmountapp.use
8.4.【其他】
-
過渡類名
v-enter修改為v-enter-from、過渡類名v-leave修改為v-leave-from。 -
keyCode作為v-on修飾符的支持。 -
v-model指令在組件上的使用已經被重新設計，替換掉了v-bind.sync。 -
v-if和v-for在同一個元素身上使用時的優先級發生了變化。 -
移除了
$on、$off和$once實例方法。 -
移除了過濾器
filter。 -
移除了
$children實例propert。…
對象citys去創建響應式對象citys2 —— 創建失敗，因為citys被markRaw標記了
let citys2 = reactive(citys)
console.log(isReactive(person))
console.log(isReactive(rawPerson))
console.log(isReactive(citys))
console.log(isReactive(citys2))
markRaw
-
作用：標記一個對象，使其永遠不會變成響應式的。
例如使用
mockjs時，為了防止誤把mockjs變為響應式對象，可以使用markRaw去標記mockjs -
編碼：
/* markRaw */ let citys = markRaw([{id:'asdda01',name:'北京'},{id:'asdda02',name:'上海'},{id:'asdda03',name:'天津'},{id:'asdda04',name:'重慶'} ]) // 根據原始對象citys去創建響應式對象citys2 —— 創建失敗，因為citys被markRaw標記了 let citys2 = reactive(citys)
7.4.【customRef】
作用：創建一個自定義的ref，并對其依賴項跟蹤和更新觸發進行邏輯控制。
實現防抖效果（useSumRef.ts）：
import {customRef } from "vue";export default function(initValue:string,delay:number){let msg = customRef((track,trigger)=>{let timer:numberreturn {get(){track() // 告訴Vue數據msg很重要，要對msg持續關注，一旦變化就更新return initValue},set(value){clearTimeout(timer)timer = setTimeout(() => {initValue = valuetrigger() //通知Vue數據msg變化了}, delay);}}}) return {msg}
}
組件中使用：
8. Vue3新組件
8.1. 【Teleport】
- 什么是Teleport？—— Teleport 是一種能夠將我們的組件html結構移動到指定位置的技術。
<teleport to='body' ><div class="modal" v-show="isShow"><h2>我是一個彈窗</h2><p>我是彈窗中的一些內容</p><button @click="isShow = false">關閉彈窗</button></div>
</teleport>
8.2. 【Suspense】
- 等待異步組件時渲染一些額外內容，讓應用有更好的用戶體驗
- 使用步驟：
- 異步引入組件
- 使用
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>
8.3.【全局API轉移到應用對象】
app.componentapp.configapp.directiveapp.mountapp.unmountapp.use
8.4.【其他】
-
過渡類名
v-enter修改為v-enter-from、過渡類名v-leave修改為v-leave-from。 -
keyCode作為v-on修飾符的支持。 -
v-model指令在組件上的使用已經被重新設計，替換掉了v-bind.sync。 -
v-if和v-for在同一個元素身上使用時的優先級發生了變化。 -
移除了
$on、$off和$once實例方法。 -
移除了過濾器
filter。 -
移除了
$children實例propert。…
