一、介绍
Hooks是Vue 3中的特性,允许在函数组件中使用状态和其他React的逻辑。本教程将演示如何使用TypeScript和Hooks管理Vue 3组件的状态和生命周期。
二、创建Hooks
首先,创建一个hooks.ts文件,包含自定义hooks。
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios'; //⭐记得终端:npm i axios
export default function useDogList() {
const dogList = ref<string[]>([]);
let isMounted = true;
async function fetchRandomDogImage() {
try {
const response = await axios.get('https://dog.ceo/api/breeds/image/random');
if (response.status === 200 && isMounted) {
dogList.value.push(response.data.message);
} else {
console.error('接口错误!');
}
} catch (error) {
console.error(error);
}
}
onMounted(() => {
fetchRandomDogImage();
});
onUnmounted(() => {
isMounted = false;
});
return {
dogList,
fetchRandomDogImage
};
}
三、使用Hooks
在组件中使用创建的hooks
<template>
<div class="dog-list">
<button @click="fetchRandomDogImage">点击增加</button>
<img v-for="dogImage in dogList" :key="dogImage" :src="dogImage" alt="Random Dog">
</div>
</template>
<script lang="ts" setup>
import useDogList from './hooks';
const { dogList, fetchRandomDogImage } = useDogList();
</script>
说明
组件生命周期处理:在onUnmounted钩子中,将isMounted标志设置为false,以避免组件卸载后继续更新状态。
类型注释:通过添加明确的类型声明,提升了代码的可读性和类型检查的有效性。
解析
useDogList是一个自定义的Hooks函数,返回一个包含dogList数组和fetchRandomDogImage函数的对象。模板中使用v-for指令遍历dogList数组,展示每张狗狗的图片。点击按钮时,调用fetchRandomDogImage函数,使用axios发起GET请求获取随机狗狗图片URL,并将其添加到dogList数组中。错误处理保证了网络请求失败时的友好提示。