vue3 - 自定义hook

设计师小聂！2025-06-18 16:56

自定义`hook`

简单点来说就是将人物或者订单的所有数据和方法放在一个ts文件里面

这样便于维护假如一个人只需要管人物的模块那他只需要操作usePerson.ts文件就可以了

ts 复制代码

import { ref,reactive} from 'vue';
import axios  from 'axios';


export default function(){
    let dogList=reactive([
        'https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg' 
    ])

    async function getDog(){
        let result=await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
        dogList.push(result.data.message)
    }

    //向外部提交东西
    return {dogList,getDog}
}

useHeight.ts

ts 复制代码

import { ref,reactive} from 'vue';

export default function(){
    let height=ref(0)
    
    function addHeigtht(){
        height.value+=1
    }

    return {height,addHeigtht}
}

person.vue

ts 复制代码

<template>
    <div class="person">
        <h1>当前的高度为{{ height }}</h1>
        <button @click="addHeigtht">点我高度加一 </button>
        <hr>
        <img v-for="(dog,index) in dogList" :src="dog" :key="index">
        <hr>
        <hr>
        <button @click="getDog">点我狗再来</button>
    </div>
</template>

<script lang="ts" setup name="Person">
   import useDog from '@/hooks/useDog'
   import useHeight from '@/hooks/useHeight'

   const {dogList,getDog} =useDog()

   const {height,addHeigtht} =useHeight()

</script>


<style>
    .person{
        background-color: aqua;
        box-shadow: 0 0 10px;
        padding: 20px;
        border-radius: 10px;
    }
    button{
        margin: 0 6px;
    }

    img{
        height: 150px;
    }
</style>