快捷導(dǎo)航

Vue?3.0?中?hooks?的概念示例詳解

更新時(shí)間：2024年10月24日 12:12:00 作者：執(zhí)鍵行天涯

在Vue3.0框架中,hooks函數(shù)允許將組件邏輯抽離復(fù)用,提高代碼的可維護(hù)性和復(fù)用性,通過封裝邏輯如獲取數(shù)據(jù)、處理狀態(tài)等,hooks使得組件開發(fā)更加高效和清晰,示例中,useDog.ts用于獲取狗狗圖片,展示了hooks封裝數(shù)據(jù)和邏輯、響應(yīng)式數(shù)據(jù)和異步操作的能力

背景：在一些情況下，前臺(tái)的組件是可以復(fù)用的，那這些復(fù)用的對(duì)象和數(shù)據(jù)，為了避免直接寫在一個(gè)vue文件中的混亂性，我們可以為每一個(gè)類型的內(nèi)容，寫成一個(gè)hooks，以便后面重復(fù)利用

一、示例

App.vue

<template>
  <Person/>
</template>
<script lang="ts" setup name="App"> //當(dāng)前根組件的組件名
import Person from './components/Person.vue'
</script>
<style >
.app {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
**useSum.ts**
```html
import {ref,reactive, computed} from 'vue'
import axios from 'axios' 
export default function(){
let sum =ref(0);
let bigSum =computed(()=>{
    return sum.value*10;
})
function addSum(){
    sum.value+=1;
}
return {sum,addSum,bigSum}
}

useDog.ts

import {ref,reactive} from 'vue'
import axios from 'axios' 
 export default function(){
let dogList = reactive([
    'https://images.dog.ceo//breeds//pembroke//n02113023_11091.jpg'
]);
async function getDog(){
    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,getDog};
 }

Person.vue，在此vue中使用上面的兩個(gè)組件；

<template>
    <div class="person">
      <h2>求和：{{sum}}====bigSum:{{bigSum}}</h2>
      <button @click="addSum">和加一</button>
      <hr/>
      <img v-for="(dog,index) in dogList" :key="index" :src="dog"><br/>
      <button @click="getDog"> 點(diǎn)我換小狗</button>
    </div>
</template>
<script lang="ts" setup name="Person">
import useDog from '@/hooks/useDog';
import useSum from '@/hooks/useSum';
let {dogList,getDog} = useDog();
let {sum,addSum,bigSum} = useSum();
</script>
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
li {
    font: 1em sans-serif;
}
img {
    height: 100px;
    margin-right: 10px;
}
</style>

展示效果

在這個(gè)例子中，很好地展示了 Vue 3.0 中 hooks 的概念及使用方式。

二、Vue 3.0 中 hooks 的概念

Hooks 是一組以 use 開頭的函數(shù)，用于在 Vue 3 的函數(shù)式組件（使用 setup 函數(shù)的組件）中封裝和復(fù)用有狀態(tài)的邏輯。它們可以讓開發(fā)者將組件中的邏輯提取出來，使得代碼更加清晰、可維護(hù)和可復(fù)用。

主要特點(diǎn)包括：

邏輯封裝：可以將特定的業(yè)務(wù)邏輯封裝在一個(gè) hook 函數(shù)中，例如獲取數(shù)據(jù)、處理狀態(tài)等。
可復(fù)用性：一個(gè) hook 可以在多個(gè)組件中復(fù)用，避免了重復(fù)代碼的編寫。
清晰的代碼結(jié)構(gòu)：通過將相關(guān)邏輯集中在 hook 函數(shù)中，組件的代碼更加簡潔明了，易于理解和維護(hù)。

在這里解釋一下例子中 hooks 的使用

useDog.ts中的 hook：
- 封裝數(shù)據(jù)和邏輯：在 useDog.ts 中，定義了一個(gè)函數(shù)，這個(gè)函數(shù)實(shí)際上就是一個(gè) hook。它封裝了與獲取狗狗圖片相關(guān)的數(shù)據(jù)（dogList）和邏輯（getDog 函數(shù)用于獲取隨機(jī)狗狗圖片的 URL 并添加到 dogList 中）。
- 響應(yīng)式數(shù)據(jù)：使用 reactive 創(chuàng)建了響應(yīng)式的 dogList，這樣當(dāng) dogList 的內(nèi)容發(fā)生變化時(shí)，使用這個(gè)數(shù)據(jù)的組件會(huì)自動(dòng)更新視圖。
- 異步操作：getDog 函數(shù)中使用 axios 進(jìn)行異步請(qǐng)求獲取隨機(jī)狗狗圖片的 URL，成功后將其添加到 dogList 中，如果出現(xiàn)錯(cuò)誤則彈出錯(cuò)誤提示。
在 Person.vue 中的使用：
- 引入 hook：通過 import useDog from '@/hooks/useDog'; 引入 useDog hook。
- 解構(gòu)賦值：使用解構(gòu)賦值 let { dogList, getDog } = useDog(); 獲取 useDog hook 中返回的 dogList 和 getDog 函數(shù)。
- 模板中使用：在模板中，使用 v-for 遍歷 dogList 來展示多個(gè)狗狗圖片，并且通過點(diǎn)擊按鈕觸發(fā) getDog 函數(shù)來獲取新的狗狗圖片，從而更新視圖。