自定義hook

簡單點來說就是將人物或者訂單的所有數據和方法放在一個ts文件里面

這樣便于維護 假如一個人只需要管 人物的模塊 那他只需要操作usePerson.ts文件就可以了

//useDog.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

import { ref,reactive} from 'vue';export default function(){let height=ref(0)function addHeigtht(){height.value+=1}return {height,addHeigtht}
}

person.vue

<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>