Vue 3 Hooks：优雅管理组件状态的完整指南

一、介绍

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数组中。错误处理保证了网络请求失败时的友好提示。