Loading... 我们也可以自定义钩子来让我们的代码更易于维护和调用。 `test.vue` ```vue <template> <div class="person"> <h2>当前有{{ sum }}张照片</h2> <button @click="add">点击获取新图片</button> <hr> <img v-for="t in dogList" :src="t"> </div> </template> <script lang="ts" setup name="test"> import useDog from '@/hooks/useDog'; const {dogList,add,sum} = useDog() </script> <style scoped> img{ height: 100px; margin-right: 10px; } </style> ``` `useDog.ts` ```ts import axios from 'axios'; import { onMounted, reactive, ref } from 'vue'; export default function(){ let sum=ref(0) let dogList = reactive(['']) async function add(){ try{ sum.value+=1 let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random') dogList.push(result.data.message) } catch(error){ alert(error) } } onMounted(()=>{ add() }) return {dogList,add,sum} } ``` 在ts文件中，除了import，其他代码都需要包在一个函数里，同时要有返回值，暴露给vue文件。这样就可以做到一个ts被多个vue文件调用，更方便 运行示例：  最后修改：2025 年 06 月 02 日 © 允许规范转载 赞 不用打赏哦！