一、介绍

Hooks是Vue 3中的特性，允许在函数组件中使用状态和其他React的逻辑。本教程将演示如何使用TypeScript和Hooks管理Vue 3组件的状态和生命周期。

二、创建Hooks

首先，创建一个hooks.ts文件，包含自定义hooks。

import { ref, onMounted } from 'vue';
import axios from 'axios';			//⭐记得终端：npm i axiosexport default function useDogList() {const dogList = ref<string[]>([]);async function fetchRandomDogImage() {try {const response = await axios.get('https://dog.ceo/api/breeds/image/random');if (response.status === 200) {dogList.value.push(response.data.message);} else {console.error('接口错误！');}} catch (error) {console.error(error);}}onMounted(() => {fetchRandomDogImage();});return {dogList,fetchRandomDogImage};
}

三、使用Hooks

在组件中使用创建的hooks

<template><div class="person"><button @click="fetchRandomDogImage">点击增加</button><img v-for="dogImage in dogList" :key="dogImage" :src="dogImage" alt="Random Dog"></div>
</template><script lang="ts" setup>javascript">
import useDogList from './hooks'; const { dogList, fetchRandomDogImage } = useDogList();
</script>

解析：

useDogList是一个自定义的hooks函数，返回一个包含dogList数组和fetchRandomDogImage函数的对象。模板中使用v-for指令遍历dogList数组，展示每张狗狗的图片。点击按钮时，调用fetchRandomDogImage函数，使用axios发起GET请求获取随机狗狗图片URL，并将其添加到dogList数组中，错误处理保证了网络请求失败时的友好提示。