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

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

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

一、示例

App.vue

<template>
  <Person/>
</template>
<script lang="ts" setup name="App"> //當前根組件的組件名
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中使用上面的兩個組件；

<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"> 點我換小狗</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>

展示效果

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

二、Vue 3.0 中 hooks 的概念

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

主要特點包括：

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

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

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