Vue 3.0 -4 hooks自定義

摘要

hooks 直譯是"鉤子"，hooks命名方式為useXXXX，以use為開頭。所以Hooks是一種自訂的獨立的組件其將封裝內部邏輯，讓該hooks可以重複使用。

例如:提供圖片使用可以命名為useImage；

hooks範例

• Hook宣告方式

檔案路徑: hooks\useCalculate.ts

import { ref } from "vue";

/**
 * @description 計算總和的參數
 * @param {number} interval  間隔
 * @param {number} initValue 初始值
 **/
interface useCountParam{
    interval:number ;
    initValue?: number  ;
}


export default function useCalculate({initValue=0, interval}:useCountParam){

    const sum = ref(initValue) ;

    function increase():void{
        sum.value += interval ; 
    }

    function decrease():void{
        sum.value -= interval ; 
    }

    return {
        sum,
        increase,
        decrease
    }
}

HooksView.vue

 <template>
    <div>
        <hr>
        <img v-for="(dog,index) in dogList" :src="dog" :key="index" width="100" height="100">
        <br>
        <button @click="callDog">call a dog</button>

        <br>
        sum:{{sum}}
        <button @click="add">increase </button>
        <button @click="minuse">decrease </button>
    </div>
</template>

<script setup lang="ts">
//useDog為hooks
import useCalculate from '@/hooks/useCalculate';
import useDog  from '@/hooks/useDog';
import { reactive } from 'vue';

//dog照片的陣列
const dogList :any= reactive([]);

const {getDog} = useDog();

//由onclick觸發功能
const callDog = ()=>{
    getDog().then(imgUrl =>{
        console.log(imgUrl)
        //Object.assign(dogList,imgUrl)
         dogList.push(imgUrl) ;  
        
    }).catch(error => {
        console.error(error);
    }); 
}

//計算機寫成hooks
const {sum ,increase,decrease}  = useCalculate({
    initValue:10,
    interval:5
});

const add = ()=>{
    increase() ; 
}

const minuse = ()=>{
    decrease();
}


</script>

<style scoped>

</style>