[TOC] #### 1. 創建 Vue3 工程 --- 基于 Vite 創建 Vue3 工程 ```bash npm create vue@latest ``` 安裝項目依賴并且運行項目 ```bash npm i && npm run dev ``` #### 2. 編寫 APP 組件 --- vite 項目中，index.html 是項目的入口文件，在項目根目錄下 加載 index.html 后，vite 解析 `<script type="module" src="xxx">` 指向的 JavaScript ```html <div id="app"></div> <script type="module" src="/src/main.js"></script> ``` main.js 文件內容：createApp 創建應用，根組件為 App，將應用掛載到 `#app` 上 ```javascript // 引入 createApp 用于創建應用 import { createApp } from 'vue' // 引入 App 根組件 import App from './App.vue' // 掛載應用 createApp(App).mount('#app') ``` #### 3. setup 概述 --- setup 是 vue3 中一個新的配置項，值是一個函數，它是組合式 API 表演的舞臺，組件中所用到的：數據、方法、計算屬性、偵聽器等等，均配置在 setup 中。 特點如下： setup 函數返回的對象中的內容，可直接在模板中使用 setup 中訪問 this 是 undefined，vue3 中已經弱化 this 了 setup 會在 beforeCreate 之前調用，它是領先所有鉤子執行的 ```html <template> <div class="app"> <div>{{ a }}</div> <div>{{ age }}</div> <button @click="changeAge">修改年齡</button> </div> </template> <script> export default { name: "App", setup() { let name = '張三' let age = 18 function changeAge() { age += 1 console.log(age); } // 數據和方法交出去，模板中就可以使用 return { a: name, age, changeAge } }, } </script> ``` setup 會在 beforeCreate 之前調用，它是領先所有鉤子執行的 ```javascript export default { name: "App", beforeCreate() { console.log('beforeCreate'); }, setup() { console.log('setup'); }, } ``` setup 的返回值也可以是一個渲染函數 ```javascript export default { name: "App", setup() { return () => '哈哈' }, } ``` #### 4. setup 與選項式 API --- setup 選項可以和選項式 API 的寫法共存，選項式 API 中可以獲取到 setup 中的數據，但是 setup 中不能讀取到選項式 API 中的數據，因為 setup 是領先所有鉤子執行的。雖然支持這種寫法，但是不建議這樣寫 ```javascript export default { name: "App", data() { return { name: '張三', userAge: this.age } }, methods: { getAge() { console.log(this.age); } }, setup() { let age = 18 return { age } }, } ``` #### 5. setup 語法糖 --- 新增一個 script 標簽，并且設置一個 setup 屬性，就可以將 setup 選項中的內容放到該標簽里面，在模板中可以直接使用該 script 標簽中的數據，相當于 setup 選項自動 return，這也是官方推薦的寫法 ```html <script> export default { name: "App", } </script> <script setup> let name = '張三' let age = 18 function changeAge() { age += 1 } </script> ``` 如果想要將組件名和 setup 合并到一個 script 標簽，需要安裝以下插件 ```bash npm i vite-plugin-vue-setup-extend -D ``` 修改 vite.config.js 配置文件，導入插件 ```javascript import VueSetupExtend from 'vite-plugin-vue-setup-extend'; export default defineConfig({ plugins: [ VueSetupExtend(), ], }) ``` 然后就可以通過給 `<script setup>` 增加 name 屬性 指定組件名了 ```html <script setup name="Person"></script> ``` 補充：有個項目好像是因為我安裝了這個插件，啟動項目報錯了，報錯信息： ``` [ERROR] No loader is configured for ".node" files: node_modules/fsevents/fsevents.node ``` 解決方案1：找到項目中 `node_modules/fsevents/fsevents.js` 文件 ```javascript // 將以下內容 // const Native = require("./fsevents.node"); // 修改為 const Native = window.require("./fsevents.node"); ``` 解決方案2：排除 fsevents 依賴優化 在 vite.config.js 中配置 optimizeDeps.exclude 排除 fsevents 依賴（常見于 macOS 環境） ```javascript export default defineConfig({ optimizeDeps: { exclude: ["fsevents"] } }) ``` 清理緩存并重新安裝依賴（排除 fsevents 依賴后項目仍無法啟動執行此步驟） 刪除 node_modules 和鎖定文件后重新安裝依賴，解決依賴安裝不完整或版本沖突問題 ```bash rm -rf node_modules package-lock.json npm cache clean --force npm install ``` #### 6. ref 創建響應式數據 --- ref 用于定義響應式變量，返回一個 RefImpl 的實例對象，簡稱 ref 對象，ref 對象的 value 屬性是響應式的 ```javascript import { ref } from 'vue'; let xxx = ref(初始值) ``` 注意點： JS 中操作數據需要 `xxx.value`，但模板中調用數據時不需要 `.value`，直接使用即可 對于 `let name = ref('張三')` 來說，name 不是響應式的，`name.value` 是響應式的 ref 創建基本類型的響應式數據 ```javascript let age = ref(18) function changeAge() { age.value += 1 } ``` ref 創建對象類型的響應式數據 ```javascript let car = ref({ brand: '奔馳', price: 100 }) let users = ref([ { id: 1, name: '張三' }, { id: 2, name: '李四' }, ]) function changePrice() { car.value.price += 10 } function changeFirstPrice() { users.value[0].name += '~' } ``` #### 7. reactive 創建響應式數據 --- reactive 創建對象類型的響應式數據 ```javascript import { reactive } from 'vue'; let car = reactive({ brand: '奔馳', price: 100 }) let users = reactive([ { id: 1, name: '張三' }, { id: 2, name: '李四' }, ]) console.log(car); // Proxy(Object) { ... } console.log(users); // Proxy(Object) { ... } function changePrice() { car.price += 10 } function changeFirstPrice() { users[0].name += '~' } ``` reactive 定義的對象響應式數據是深層次的 ```javascript let obj = reactive({ a: { b: { c: 1 } } }) function changeObj() { obj.a.b.c += 1 } ``` #### 8. ref 和 reactive 對比 --- ref 用來定義：基本類型數據、對象類型數據；reactive 用來定義：對象類型數據 一、區別： ref 創建的變量必須使用 `.value` 獲取值，reactive 定義的變量則不需要 ```javascript let age = ref(10) let car = reactive({ brand: '奔馳', price: 100 }) function changePrice() { age.value += 1 car.price += 2 } ``` reactive 重新分配一個新對象，會失去響應式（可以使用 Object.assign 去整體替換） ```javascript let car = reactive({ brand: '奔馳', price: 100 }) function changePrice() { // 不具備響應式 // car = { brand: '寶馬', price: 200 } // 這種寫法具有響應式 Object.assign(car, { brand: '寶馬', price: 200 }) } ``` 但是使用 ref 定義的對象類型數據，直接分配一個對象，也具有響應式 ```javascript let car = ref({ brand: '奔馳', price: 100 }) function changePrice() { car.value = { brand: '寶馬', price: 200 } } ``` 二、使用原則： 若需要一個基本類型的響應式數據，必須使用 ref 若需要一個響應式對象，層級不深，ref、reactive 都可以 若需要一個響應式對象，且層級較深，推薦使用 reactive 三、ref 處理對象類型的響應式數據時，其 value 的值還是使用 reactive 處理的 ```javascript let age = ref(10) let car = reactive({ brand: '奔馳', price: 100 }) console.log(age); // RefImpl { ... } console.log(car); // Proxy(Object) { ... } ``` #### 9. toRefs 與 toRef --- 將一個響應式對象中的每一個屬性，轉換為 ref 對象。toRefs 與 toRef 功能一致，但 toRefs 可以批量轉換 ```javascript import { ref, reactive, toRefs, toRef } from 'vue'; // ref 定義的對象類型 // let person = ref({ name: '張三', age: 18 }) // let { name, age } = toRefs(person.value) let person = reactive({ name: '張三', age: 18 }) let { name, age } = toRefs(person) // 批量轉換 let n2 = toRef(person, 'name') // 單個轉換 function changeName() { name.value += '~' } ``` #### 10. computed 計算屬性 --- ```javascript import { ref, computed } from 'vue'; let firstName = ref('zhang') let lastName = ref('San') // 這么定義的計算屬性，是只讀的 // let fullName = computed(() => { // return firstName.value.toLocaleUpperCase() + ' ' + lastName.value.toLocaleLowerCase() // }) // 這么定義的計算屬性，可讀可寫 let fullName = computed({ get() { return firstName.value.toLocaleUpperCase() + ' ' + lastName.value.toLocaleLowerCase() }, set(val) { const [str1, str2] = val.split('-') firstName.value = str1 lastName.value = str2 } }) function changFullName() { fullName.value = 'Li-Si' } ``` #### 11. watch 偵聽器 --- watch 用于監視數據的變化，和 vue2 中的 watch 作用一致 特點：Vue3 中的 watch 只能監視以下四種數據： + ref 定義的數據 + reactive 定義的數據 + 函數返回一個值 + 一個包含上述內容的數組 情況一：監視 ref 定義的基本類型數據 ```javascript import { ref, watch } from 'vue'; let sum = ref(0) function changeSum() { sum.value += 1 } // 監視的時候不需要寫 sum.value，直接寫 sum 即可 const stopWatch = watch(sum, (newValue, oldValue) => { console.log('sum 變化了'); console.log({ newValue, oldValue }); // 當值大于 5 時，停止監視 if (newValue >= 5) { stopWatch() } }) ``` 情況二：監視 ref 定義的對象類型數據 直接寫數據名，監視的是對象的地址值，若想要監視對象內部的數據，要手動開啟深度監視 注意： + 若修改的是 ref 定義的對象中的屬性，newValue 和 oldValue 都是新值，因為它們是同一個對象 + 若修改整個 ref 定義的對象，newValue 是新值，oldValue 是舊值，因為它們不是同一個對象了 ```javascript import { ref, watch } from 'vue'; let person = ref({ name: '張三', age: 18 }) function changeName() { // 修改對象中的屬性，不會觸發監視器1，會觸發監視器2 person.value.name += '~' } function changePerson() { // 修改對象的地址值，既會觸發監視器1，也會觸發監視器2 person.value = { name: '李四', age: 20 } } // 監視器1：監視的是對象的地址值 watch(person, (newValue, oldValue) => { console.log('person 對象地址值 變化了'); console.log(newValue, oldValue); }) // 監視器2: 若想監視對象內部屬性的變化，需要手動開啟深度監視 deep: true watch(person, (newValue, oldValue) => { console.log('person 對象地址值或屬性值 變化了'); console.log(newValue, oldValue); }, { deep: true }) // watch 的第一個參數: 被監視的數據 // watch 的第二個參數: 監視的回調 // watch 的第三個參數: 配置對象 // immediate: true，進入頁面立即監視 watch(person, (newValue, oldValue) => { console.log('person 立即監視 變化了'); console.log(newValue, oldValue); }, { deep: true, immediate: true }) ``` 情況三：reactive 定義的對象類型數據 監視 reactive 定義的對象類型數據，且默認是開啟深度監視的，無需手動開啟，并且其深度監視是無法關閉的 ```javascript import { reactive, watch } from 'vue'; let person = reactive({ name: '張三', age: 18 }) function changeName() { person.name += '~' } function changePerson() { Object.assign(person, { name: '李四', age: 30 }) } watch(person, (newValue, oldValue) => { console.log('person 屬性值 變化了'); console.log(newValue, oldValue); }) // 并且 深度監視 無法關閉的，deep: false 是無效的 // watch(person, (newValue, oldValue) => { }, { deep: false }) ``` 情況四：監視 ref 或 reactive 定義的對象類型數據中的某個屬性，注意點如下： + 若該屬性值不是對象類型，需要寫成函數形式 + 若該屬性值依然是對象類型，可以直接編寫，也可以寫成函數，不過建議寫成函數 結論：監視對象里的屬性，最好寫函數式，默認監視對象的地址值；若是需要監視對象的屬性值，手動開啟深度監視即可 ```javascript let person = reactive({ name: '張三' }) function changeName() { person.name += '~' } // 錯誤寫法 // watch(person.name, (val) => { // console.log('person.name 變化了'); // }) // 正確寫法，屬性值不是對象類型，需要寫成函數形式 watch(() => person.name, (val) => { console.log('person.name 變化了'); }) ``` ```javascript let person = reactive({ name: '張三', car: { c1: '奔馳', c2: '寶馬' } }) function changeC1() { // 場景一：修改對象中的屬性值，可以觸發監視器1，不能觸發監視器2，可以觸發監視器3 person.car.c1 += '奧迪' } function changeC2() { // 場景二：修改對象中的屬性值，可以觸發監視器1，不能觸發監視器2，可以觸發監視器3 person.car.c2 = '大眾' } function changeCar() { // 場景三：修改對象的地址值，無法觸發監視器1，可以觸發監視器2，可以觸發監視器3 person.car = { c1: '雅迪', c2: '愛瑪' } // 場景四：這種寫法沒有修改對象的地址值，可以觸發監視器1，不能觸發監視器2，可以觸發監視器3 // Object.assign(person.car, { c1: '雅迪', c2: '愛瑪' }) } // 監視器1: 屬性值依然是對象類型，可以直接編寫 // watch(person.car, (val) => { // console.log('person.car 屬性值變化了'); // }) // 監視器2: 給對象包一個函數，此時監視的就是這個對象的地址值 // watch(() => person.car, (val) => { // console.log('person.car 地址值變化了'); // }) // 監視器3: 給對象包一個函數，手動開啟深度監視 watch(() => person.car, (val) => { console.log('person.car 屬性值或地址值變化了【深度監視】'); }, { deep: true }) ``` 情況五：監視上述多個數據 ```javascript // 監視多個數據，以下兩種寫法都可以 watch([() => person.name, person.car], (newValue, oldValue) => { console.log(newValue, oldValue); }) watch([() => person.name, () => person.car.c1], (newValue, oldValue) => { console.log(newValue, oldValue); }) ``` #### 12. watchEffect --- 立即運行一個函數，同時響應式地追蹤其依賴，并在依賴更改時重新執行該函數 watch 對比 watchEffect + 都能監聽響應式數據的變化，不同的是監聽數據變化的方式不同 + watch 要明確指出監視的數據 + watchEffect 不用明確指出監視的數據，函數中用到哪些屬性，那就監視哪些屬性 ```javascript import { ref, watch, watchEffect } from 'vue'; let temp = ref(0) let height = ref(0) function changeTemp() { temp.value += 1 } function changeHeight() { height.value += 2 } // 需求: 當 temp > 3 或 height > 5 時 給服務器發送請求 // watch([temp, height], (val) => { // let [temp, height] = val // if (temp > 3 || height > 5) { // console.log('給服務器發請求'); // } // }) watchEffect(() => { console.log('watchEffect 執行了'); if (temp.value > 3 || height.value > 5) { console.log('給服務器發請求'); } }) ``` #### 13. 標簽的 ref 屬性 --- 情況一：用在普通 DOM 標簽上，獲取的是 DOM 節點 ```html <template> <div class="app"> <h2 ref="title">北京</h2> <button @click="showLog">點我輸出h2元素</button> </div> </template> <script setup> import { ref } from 'vue'; // 創建一個 title，用于存儲 ref 標記的內容 let title = ref() function showLog() { console.log(title.value); // <h2 ref="title">北京</h2> } </script> ``` 情況二：用在組件標簽上，獲取的是組件實例對象 #### 14. 回顧 TS 接口、泛型 --- 創建一個接口，文件位置 `src/types/index.ts`，內容如下所示： ```javascript // 定義一個接口，用于限制 person 對象的具體屬性 export interface PersonInter { id: number, name: string, age: number } // 一個自定義類型（兩種寫法都可以） // export type Persons = Array<PersonInter> export type Persons = PersonInter[] ``` 使用接口，必須遵守其規范 ```javascript import { type PersonInter, type Persons } from '@/types'; // 使用接口 let person: PersonInter = { id: 1, name: '張三', age: 18 } // 數組中的每個元素都遵循 PersonInter 接口 let personList: Array<PersonInter> = [ { id: 1, name: '張三', age: 18 }, { id: 2, name: '李四', age: 20 }, ] let personArray: Persons = [ { id: 1, name: '張三', age: 18 }, { id: 2, name: '李四', age: 20 }, ] ``` #### 15. props 的使用 --- reactive 定義的對象類型數據使用泛型 ```javascript import { reactive } from 'vue'; import { type Persons } from '@/types'; // 下面兩種寫法都可以 // 第一種：寫在變量名后面 let personList1: Persons = reactive([ { id: 1, name: '張三', age: 18 }, { id: 2, name: '李四', age: 20 }, { id: 3, name: '王五', age: 20 }, ]) // 第二種：寫在 reactive 后面 let personList2 = reactive<Persons>([ { id: 1, name: '張三', age: 18 }, { id: 2, name: '李四', age: 20 }, { id: 3, name: '王五', age: 20 }, ]) ``` 當前有父組件 App.vue，文件內容如下所示 ```html <template> <Person :list="personArray" /> </template> <script lang="ts" setup name="App"> import Person from './Person.vue'; import { reactive } from 'vue'; import { type Persons } from '@/types'; let personArray = reactive<Persons>([ { id: 1, name: '張三', age: 18 }, { id: 2, name: '李四', age: 20 }, { id: 3, name: '王五', age: 20 }, ]) </script> ``` 子組件 Person.vue 文件內容 ```html <template> <ul> <li v-for="item in list">{{ item.name }}</li> </ul> </template> <script lang="ts" setup> import { defineProps, withDefaults } from 'vue'; import { type Persons } from '@/types'; // 接受 list // defineProps(['list']) // 接受 list + 限制類型 // defineProps<{ list: Persons }>() // 接受 list + 限制類型 + 限制必要性（?: 父組件可以不傳） // defineProps<{ list?: Persons }>() // 接受 list + 限制類型 + 限制必要性 + 指定默認值 let props = withDefaults(defineProps<{ list?: Persons }>(), { list: () => [{ id: 1, name: 'liang', age: 18 }] }) // 接受 list, 同時將 props 保存起來 // let props = defineProps(['list']) </script> ``` #### 16. Vue2 生命周期 --- Vue 組件實例在創建時要經歷一系列的初始化步驟，在此過程中 Vue 會在合適的時機，調用特定的函數，從而讓開發者有機會在特定階段運行自己的代碼，這些特定的函數統稱為：生命周期鉤子 生命周期整體分為四個階段，每個階段都有兩個鉤子，一前一后 + 創建（創建前，創建完畢） + 掛載（掛載前，掛載完畢） + 更新（更新前，更新完畢） + 銷毀（銷毀前，銷毀完畢） 常用的鉤子：掛載完畢，更新完畢、卸載之前 ```javascript export default { name: 'Person', data() { return { sum: 1 } }, methods: { add() { this.sum += 1 } }, // 創建前的構子 beforeCreate() { console.log('beforeCreate 創建前的構子'); }, // 創建完畢的構子 created() { console.log('created 創建完畢的鉤子'); }, // 掛載前的構子 beforeMount() { console.log('beforeMount 掛載前的構子'); }, // 掛載完畢的構子 mounted() { console.log('mounted 掛載完畢的構子'); }, // 更新前的構子 beforeUpdate() { console.log('beforeUpdate 更新前的構子'); }, // 更新完畢的構子 updated() { console.log('updated 更新完畢的構子'); }, // 銷毀前的構子 beforeDestroy() { console.log('beforeDestroy 銷毀前的構子'); }, // 消耗完畢的構子 destroyed() { console.log('destroyed 消耗完畢的構子'); } } ``` #### 17. Vue3 生命周期 --- Vue3 的生命周期 + 創建（setup） + 掛載（掛載前，掛載完畢） + 更新（更新前，更新完畢） + 卸載（卸載前，卸載完畢） ```javascript import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'; let sum = ref(0) function add() { sum.value += 1 } // 掛載前 onBeforeMount(() => { console.log('掛載前'); }) // 掛載完畢 onMounted(() => { console.log('掛載完畢'); }) // 更新前 onBeforeUpdate(() => { console.log('更新前'); }) // 更新完畢 onUpdated(() => { console.log('更新完畢'); }) // 卸載前 onBeforeUnmount(() => { console.log('卸載前'); }) // 卸載完畢 onUnmounted(() => { console.log('卸載完畢'); }) ``` #### 18. 自定義 hooks --- 現有組件 Person.vue ```html <template> <h2>求和: {{ sum }}</h2> <button @click="add">點我sum+1</button> <br> <img v-for="item in dogList" :src="item"> <br> <button @click="getLog">獲取小狗</button> </template> <script lang="ts" setup> import useSum from '@/hooks/useSum'; import useDog from '@/hooks/useDog'; const { sum, add } = useSum() const { dogList, getLog } = useDog() </script> ``` hooks 文件 useSum.ts （src/hooks/useSum.ts） ``` import { ref, onMounted } from 'vue'; export default function () { // 數據 let sum = ref(0) // 方法 function add() { sum.value += 1 } // 可以正常編寫鉤子 onMounted(() => { sum.value += 2 }) // 向外部提供東西 return { sum, add } } ``` hooks 文件 useDog.ts （src/hooks/useDog.ts） ``` import axios from 'axios'; import { reactive } from 'vue'; export default function () { // 數據 let dogList = reactive([ "https://images.dog.ceo/breeds/pembroke/n02113023_3324.jpg", ]) // 方法 async function getLog() { try { let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random') dogList.push(result.data.message) } catch (error) { alert(error) } } // 向外部提供東西 return { dogList, getLog } } ``` #### 19. 路由基本切換效果 --- 概念：路由就是一組 key-value 的對應關系，多個路由，需要經過路由器的管理 安裝路由器 ```bash npm i vue-router ``` 創建路由器文件，src/router/index.ts ```javascript // 創建一個路由，并且暴露出去 // 第一步: 引入 createRouter import { createRouter, createWebHistory } from 'vue-router'; // 引入一個一個可能要呈現的組件 import Home from '@/components/Home.vue'; import News from '@/components/News.vue'; import About from '@/components/About.vue'; // 第二步: 創建路由器 const router = createRouter({ // 路由器的工作模式 history: createWebHistory(), // 路由規則 routes: [ { path: '/home', component: Home }, { path: '/news', component: News }, { path: '/about', component: About }, ] }) // 暴露出去 router export default router ``` 修改 main.js ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 引入路由器 import router from './router'; // 將以下內容 createApp(App).mount("#app") // 修改為 const app = createApp(App) // 創建一個應用 app.use(router) // 使用路由器 app.mount("#app") // 掛載app應用到容器中 // 也可以連寫 // app.use(router).mount("#app") ``` 根組件 App.vue ```html <template> <div class="app"> <h2 class="title">Vue 路由測試</h2> <!-- 導航區 --> <div class="navigate"> <!-- active-class 指定激活時的class值--> <RouterLink to="/home" active-class="active">首頁</RouterLink> <RouterLink to="/news" active-class="active">新聞</RouterLink> <RouterLink to="/about" active-class="active">關于</RouterLink> </div> <!-- 展示區 --> <div class="content"> <RouterView></RouterView> </div> </div> </template> <script lang="ts" name="App"> import { RouterView, RouterLink } from 'vue-router'; </script> <style> .navigate a { margin-right: 20px; } .content { width: 600px; padding: 20px; margin-top: 20px; border: 1px solid red; } </style> ``` #### 20. 路由兩個注意點 --- 路由兩個注意點： + 路由組件通常存放在 pages 或 views 文件夾，一般組件通常存放在 components 文件夾 + 通過點擊導航，視覺效果上 “消失”了的路由組件，默認是被卸載掉的，需要的時候再去掛載 路由組件：靠路由的規則渲染出來的 ```javascript routes: [{ path: '/home', component: Home }] ``` 一般組件：親手寫標簽出來的 ```html <Person /> ``` 視覺效果上 “消失”了的路由組件，默認是被卸載掉的，需要的時候再去掛載 ```html <template> <div>News</div> </template> <script setup> import { onMounted, onUnmounted } from 'vue'; onMounted(() => { console.log('news onMounted'); }) onUnmounted(() => { console.log('news onUnmounted'); }) </script> ``` #### 21. 路由器的工作模式 --- 路由器的兩種工作模式：history 模式、hash 模式 history 模式 + 優點： URL 更加美觀，不帶有 #，更接近傳統網站的 URL + 缺點：后期項目上線，需要服務端配合處理路徑問題，否則刷新會有404錯誤 hash 模式 + 優點：兼容性更好，因為不需要服務端處理路徑 + 缺點：URL 帶有 # 不太美觀，且在 SEO 優化方面相對較差 使用示例： ```javascript import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'; const router = createRouter({ // 路由器的工作模式 history: createWebHistory(), // history 模式 // history: createWebHashHistory(), // hash 模式 // 路由規則 routes: [] }) ``` #### 22. 路由 to 的兩種寫法 --- 路由 to 的兩種寫法：字符串形式、對象形式（又分為通過路由名稱和路由路徑跳轉） ```html <RouterLink to="/home">首頁</RouterLink> <RouterLink :to="{ name: 'xinwen' }">新聞</RouterLink> <RouterLink :to="{ path: '/about' }">關于</RouterLink> ``` ```javascript const router = createRouter({ // 路由器的工作模式 history: createWebHistory(), // 路由規則 routes: [ { name: 'zhuye', path: '/home', component: Home }, { name: 'xinwen', path: '/news', component: News }, { name: '/guanyu', path: '/about', component: About }, ] }) ``` #### 23. 命名路由 --- 命令路由：可以簡化路由跳轉及傳參 給路由規則命名，如下所示，命名為 xinwen ```javascript routes: [{ name: 'xinwen', path: '/news/list', component: News }] ``` 跳轉路由： ```html <!-- 簡化前，需要寫完整的路由路徑，現在只需寫路由名稱即可 --> <RouterLink :to="{ name: 'xinwen' }">新聞</RouterLink> ``` #### 24. 嵌套路由 --- 路由規則中使用 children 可定義嵌套路由 ```javascript routes: [ { path: '/news', component: News, children: [ { path: 'detail', component: Detail } ] }, ] ``` 那么在 News.vue 中，可以使用嵌套路由 ```html <template> <div>News</div> <!-- 導航區 --> <ul> <li v-for="item in newsList" :key="item.id"> <RouterLink to="/news/detail">{{ item.title }}</RouterLink> </li> </ul> <!-- 展示區 --> <div class="news-content"> <RouterView></RouterView> </div> </template> <script lang="ts" setup> import { RouterView, RouterLink } from 'vue-router'; import { reactive } from 'vue'; const newsList = reactive([ { id: 1, title: '春節活動', content: '這是春節活動內容' }, { id: 2, title: '國慶節活動', content: '這是國慶節活動內容' }, ]) </script> ``` #### 25. 路由 query 參數 --- 傳遞參數 ```html <li v-for="item in newsList" :key="item.id"> <!-- 第一種寫法 --> <!-- <RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}`">{{ item.title }}</RouterLink> --> <!-- 第二種寫法 --> <RouterLink :to="{ path: '/news/detail', query: { id: item.id, title: item.title } }">{{ item.title }} </RouterLink> </li> ``` 接收參數 ```javascript import { useRoute } from 'vue-router'; // 打印 query 參數 const route = useRoute() ``` 使用示例： ```html <template> <ul> <li>ID：{{ route.query.id }}</li> <li>標題：{{ route.query.title }}</li> </ul> </template> <script lang="ts" setup> import { useRoute } from 'vue-router'; const route = useRoute() </script> ``` 也可以使用 toRefs ```html <template> <ul> <li>ID：{{ query.id }}</li> <li>標題：{{ query.title }}</li> </ul> </template> <script lang="ts" setup> import { toRefs } from 'vue'; import { useRoute } from 'vue-router'; const route = useRoute() let { query } = toRefs(route) </script> ``` #### 26. 路由 params 參數 --- 用法說明 + 傳遞 params 參數時，需要提前在路由規則中占位 + 傳遞 params 參數時，若使用 to 的對象寫法，必須使用 name 配置項，不能用 path 修改路由規則：`detail/:id/:title` 參數占位，`?` 表示可選參數 ```javascript routes: [ { name: 'xinwen', path: '/news', component: News, children: [ { name: 'newDetail', path: 'detail/:id/:title?', component: Detail } ] } ] ``` 傳遞參數 ```html <li v-for="item in newsList" :key="item.id"> <!-- 第一種寫法 --> <!-- <RouterLink :to="`/news/detail/${item.id}/${item.title}`">{{ item.title }}</RouterLink> --> <!-- 第二種寫法，不能用 path，只能用 name --> <RouterLink :to="{ name: 'newDetail', params: { id: item.id, title: item.title, } }">{{ item.title }}</RouterLink> </li> ``` 接收參數 ```html <template> <ul> <li>ID：{{ route.params.id }}</li> <li>標題：{{ route.params.title }}</li> </ul> </template> <script lang="ts" setup> import { useRoute } from 'vue-router'; const route = useRoute() console.log(route); </script> ``` #### 27. 路由 props 配置 --- 作用：讓路由組件更方便的收到參數（可以將路由參數作為 props 傳給組件） ```javascript { // 第一種寫法: 布爾值，作用：把收到的每一組 params 參數，作為 props 傳給 detail 組件 props: true, // 第二種寫法: 函數寫法，作用：把返回的對象中每一組 key-value，作為 props 傳給 detail 組件 props(route) { return route.query }, // 第三種寫法: 對象寫法，作用：把返回的對象中每一組 key-value，作為 props 傳給 detail 組件 props: { id: '123', title: '標題' } } ``` 上述我們傳遞 params 參數的寫法有點麻煩，可以使用 路由 props 配置進行優化 ```javascript routes: [ { path: '/news', component: News, children: [ { name: 'newDetail', path: 'detail/:id/:title', component: Detail, // 第一種寫法: 布爾值，作用：把收到的每一組 params 參數，作為 props 傳給 detail 組件 props: true } ] } ] ``` 如果傳遞的是 query 參數，可以定義 props 為一個函數，將 query 參數作為返回值 ```javascript routes: [ { path: '/news', component: News, children: [ { name: 'newDetail', path: 'detail', component: Detail, // 第二種寫法: 函數寫法，作用：把返回的對象中每一組 key-value，作為 props 傳給 detail 組件 props(route) { return route.query } } ] } ] ``` 第三種寫法: 對象寫法，這種寫法用的比較少 ```javascript routes: [ { path: '/news', component: News, children: [ { name: 'newDetail', path: 'detail', component: Detail, // 第三種寫法: 對象寫法，作用：把返回的對象中每一組 key-value，作為 props 傳給 detail 組件 props: { id: '123', title: '標題' } } ] } ] ``` Detail.vue 組件接收數據就比較簡單了，可接受上述三種寫法傳遞的參數 ```html <template> <ul> <li>ID：{{ id }}</li> <li>標題：{{ title }}</li> </ul> </template> <script lang="ts" setup> import { defineProps } from 'vue'; defineProps(['id', 'title']) </script> ``` #### 28. 路由 replace 屬性 --- 作用：控制路由跳轉時操作瀏覽器歷史記錄的模式 瀏覽器的歷史記錄有兩種寫入方式：分別為 push 和 replace + push 是追加歷史記錄（默認值） + replace 是替換當前記錄 開啟 replace 模式 ```html <RouterLink replace ...>XXX</RouterLink> ``` #### 29. 編程式路由導航 --- 編程式路由導航： 脫離 RouterLink 標簽實現路由跳轉 路由組件的兩個重要屬性：`$route` 和 `$router` 變成了兩個 `hooks` ```javascript import { onMounted } from 'vue'; import { useRouter } from 'vue-router'; const router = useRouter() onMounted(() => { // 掛載完畢3秒后跳轉路由 setTimeout(() => { // router.push('/news') router.replace('/news') }, 3000) }) ``` 關于 router.push() 方法的參數，和 RouterLink 的 to 的寫法相同 ```javascript function showNewsDetail(item: any) { router.push({ name: 'newDetail', query: { id: item.id } }) } ``` #### 30. 路由重定向 --- 作用：讓指定的路徑重定向到另一個路徑 ```javascript routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: Home }, ] ``` #### 31. 搭建 pinia 環境 --- 集中式狀態管理工具：Vue2 中使用的是 VueX、Vue3 中使用的是 pinia 安裝 pinia 依賴 ```bash npm i pinia ``` 使用 pinia ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 第一步: 引入 pinia import { createPinia } from 'pinia'; const app = createApp(App) // 第二步: 創建 pinia const pinia = createPinia() // 第二步: 安裝 pinia app.use(pinia) app.mount("#app") ``` #### 32. 存儲 + 讀取數據 --- Store 是一個保存：狀態、業務邏輯的實體，每個組件都可以讀取、寫入它 它有三個概念：state、getter、action，相當于組件中的：data、computed 和 methods 具體編碼：`src/store/count.ts` ```javascript import { defineStore } from 'pinia'; // 定義并暴露一個 store export const useCountStore = defineStore('count', { // 真正存儲數據的地方 state() { return { sum: 2 } } }) ``` 讀取數據 ```javascript // 引入 useCountStore import { useCountStore } from '@/store/count'; // 使用 useCountStore，得到一個專門保存 count 相關的 store const countStore = useCountStore() // 以下兩種方式都可以拿到 state 中的數據 console.log(countStore.sum); // console.log(countStore.$state.sum); ``` #### 33. 修改數據的三種方式 --- 修改 pinia 數據的三種方式： ```javascript // 引入 useCountStore import { useCountStore } from '@/store/count'; // 使用 useCountStore，得到一個專門保存 count 相關的 store const countStore = useCountStore() function inc() { // 第一種方式：直接修改 countStore.sum += 1 countStore.title = '新標題' // 第二種方式：批量修改 countStore.$patch({ sum: 10, title: '這是標題', }) // 第三種方式：借助 actions 修改（actions 中可以編寫一些業務邏輯） countStore.increment(10) } ``` useCountStore 編碼：`src/store/count.ts` ```javascript import { defineStore } from 'pinia'; // 定義并暴露一個 store export const useCountStore = defineStore('count', { // actions 里面放置的是一個一個的方法，用于響應組件的動作 actions: { increment(value) { // 修改數據（this 是當前 store） this.sum += value } }, // 真正存儲數據的地方 state() { return { sum: 1, title: '標題', } } }) ``` #### 34. storeToRefs --- 上面我們讀取 pinia 的時候是這樣的，好像不太方便，不夠優雅 ```html <div>當前求和：{{ countStore.sum }}</div> <div>當前標題：{{ countStore.title }}</div> ``` 那么我們可能想到使用解構賦值，直接解構這種方式會使數據失去了響應式 ```javascript import { useCountStore } from '@/store/count'; const countStore = useCountStore() // 讀取數據是可以的，但是失去了響應式 const { sum, title } = countStore ``` ```html <div>當前求和：{{ sum }}</div> <div>當前標題：{{ title }}</div> ``` 發現數據沒有響應式，你可能會想到使用 toRefs 解構 ```javascript // 數據確實是響應式，但是不建議使用，代價比較大 const { sum, title } = toRefs(countStore) ``` 通過打印發現，將 store 中的所有屬性和方法都變為了 ref 引用，而我們只需要把 store 中的數據變為引用 所以，雖然可以實現，但是不要用 toRefs 解構 store 的數據 ```javascript console.log(toRefs(countStore)); ``` pinia 也注意到了這個問題，提供了一個 storeToRefs 來解決這個事情 storeToRefs 只關注 store 中的數據，不會關注 store 中的方法，只將 store 中的數據變為 ref 引用 ```javascript import { storeToRefs } from 'pinia'; import { useCountStore } from '@/store/count'; const { sum, title } = storeToRefs(countStore) ``` #### 35. getters 的使用 --- 概念：當 state 中的數據，需要經過處理后再使用時，可以使用 getters 配置 ```javascript import { defineStore } from 'pinia'; // 定義并暴露一個 store export const useCountStore = defineStore('count', { // 真正存儲數據的地方 state() { return { sum: 1, title: 'hello world', } }, getters: { // 第一種寫法：使用 state bigSum(state) { return state.sum * 10 }, // 簡寫為箭頭函數，反正不使用 this // bigSum: state => state.sum * 2, // 第二種寫法: 使用 this upperTitle() { return this.title.toLocaleUpperCase() } } }) ``` 使用 getters 中的方法 和 使用 state 中的數據寫法是一樣的 ```javascript import { storeToRefs } from 'pinia'; import { useCountStore } from '@/store/count'; const countStore = useCountStore() const { sum, title, bigSum, upperTitle } = storeToRefs(countStore) ``` #### 36. $subscribe 監聽 state --- 通過 store 的 `$subscribe` 方法監聽 state 及其變化 ```javascript const countStore = useCountStore() const { sum, title } = storeToRefs(countStore) // 只要 state 中的數據有一個發生了變化就能監聽到 countStore.$subscribe((mutate, state) => { // mutate 事件信息 state: store中的數據 console.log('countStore 數據發生變化了'); console.log(state); console.log(state.title); console.log(title.value); }) ``` #### 37. store 的組合式寫法 --- 上面我們寫的 store 都是選項式的寫法，如下所示 ```javascript import { defineStore } from 'pinia'; export const useCountStore = defineStore('count', { actions: { increment(value) { } }, state() { return { sum: 1 } }, getters: { bigSum: state => state.sum * 2, } }) ``` store 也支持組合式的寫法，如下所示 ```javascript import { defineStore } from 'pinia'; import { ref, computed } from 'vue'; export const useCountStore = defineStore('count', () => { // state let sum = ref(1) // actions const increment = (val: Number) => { sum.value += 5 } // getters （使用 computed 計算屬性即可） const bigSum = computed(() => { return sum.value * 100 }) // 暴露出去 return { sum, title, bigSum, increment } }) ``` #### 38. 組件通信 --- ##### 第一種方式：props 概述：props 是使用頻率最高的一種通信方式，常用于：父子組件之間的傳值 + 若父傳子：屬性值為非函數 + 若子傳父：屬性值是函數 現有父組件 Father.vue，子組件 Child.vue 父組件將數據傳給子組件，示例如下，可以看出來屬性值不是函數 ```html <h2>父組件</h2> <Child :vehicle="car"></Child> ``` ```javascript import { ref } from 'vue'; import Child from './Child.vue'; let car = ref('奔馳') ``` 子組件 Child.vue 接收父組件 Father.vue 傳給的數據 ```html <h2>子組件</h2> <h3>父組件給的值：{{ vehicle }}</h3> ``` ``` // 聲明接收 props defineProps(['vehicle']) ``` 子組件將數據傳給父組件，示例如下，可以看到屬性值是一個函數 父組件給子組件傳遞一個方法，子組件接收并且調用這個方法將數據傳給父組件 ```html <template> <div class="father"> <h2>父組件</h2> <h3 v-show="toy">子組件數據：{{ toy }}</h3> <Child :sendToy="getToy"></Child> </div> </template> <script lang="ts" setup name="Father"> import { ref } from 'vue'; import Child from './Child.vue'; let toy = ref('') function getToy(value) { toy.value = value } </script> ``` ```html <template> <div class="child"> <h2>子組件</h2> <button @click="sendToy(toy)">給父組件數據</button> </div> </template> <script lang="ts" setup name="Child"> import { ref } from 'vue'; let toy = ref('奧特曼') defineProps(['sendToy']) </script> ``` ##### 第二種方式：自定義事件 先了解一下事件對象，調用方法但是沒有傳參數，接收參數默認是事件對象 ```html <template> <button @click="btnClick">點我</button> </template> <script setup> function btnClick(e) { console.log(e); // 事件對象 PointerEvent{...} } </script> ``` 傳了參數，又想要獲取事件對象。模板中有個特殊的占位符，可以理解為一個特殊的變量 `$event`，它就是事件對象 ```html <template> <button @click="btnClick(1, 2, $event)">點我</button> </template> <script setup> function btnClick(a, b, event) { console.log(a, b, event); } </script> ``` 自定義事件用法示例，子組件給父組件傳遞數據 ```html <template> <div class="father"> <h2>父組件</h2> <Child @send-toy="saveToy"></Child> </div> </template> <script setup> function saveToy(value) { console.log('父組件收到子組件傳的數據：' + value); } </script> ``` ```html <template> <div class="child"> <h2>子組件</h2> <button @click="emit('send-toy', toy)">給父組件數據</button> </div> </template> <script setup> import { ref } from 'vue'; let toy = ref('奧特曼') // 聲明事件 const emit = defineEmits(['send-toy']) </script> ``` ##### 第三種方式：mitt 使用 mitt 可以實現任意組件通信，用法如下： + 接收數據的：提前綁定事件（提前訂閱消息） + 提供數據的：在合適的時候觸發事件（發布消息） 安裝 mitt ```bash npm i mitt ``` 編寫代碼：`src/utils/emitter.ts` ```javascript // 引入 mitt import mitt from 'mitt'; // 調用 mitt 得到 emitter，emitter 能：綁定事件、觸發事件 const emitter = mitt() // 暴露 emitter export default emitter ``` 在 main.js 中引入 mitt，使其運行 ```javascript // 引入 emitter 使其運行 import emitter from '@/utils/emitter'; ``` mitt 基礎語法 ```javascript const emitter = mitt() // 綁定事件 emitter.on('test1', () => { console.log('test1 被調用了'); }) emitter.on('test2', () => { console.log('test2 被調用了'); }) // 觸發事件 setInterval(() => { emitter.emit('test1') emitter.emit('test2') }, 2000) // 解綁事件 setTimeout(() => { // 解綁指定事件 emitter.off('test1') // 解綁所有事件 // emitter.all.clear() }, 5000) ``` 使用示例: 在接收數據的組件中綁定一個事件 ```html <template> <h2>組件2</h2> <h2>收到的數據: {{ toy }}</h2> <button>給父組件數據</button> </template> <script lang="ts" setup> import { ref, onUnmounted } from 'vue'; import emitter from '@/utils/emitter'; let toy = ref('') // 給 emitter 綁定 send-toy 事件 emitter.on('send-toy', (value: any) => { toy.value = value }) // 在組件卸載時 解除綁定事件 onUnmounted(() => { emitter.off('send-toy') }) </script> ``` 在發送數據的組件中觸發事件且傳遞參數 ```html <template> <h2>組件1</h2> <button @click="emitter.emit('send-toy', toy)">發送數據</button> </template> <script lang="ts" setup> import { ref } from 'vue'; import emitter from '@/utils/emitter'; let toy = ref('奧特曼') </script> ``` ##### 第四種方式：v-model #### 部署項目 --- Vue3 項目部署后刷新頁面報錯 服務器配置方案 nginx 配置 ``` location / { try_files $uri $uri/ /index.html; } ```