Vue 3 使用 Hook：提升代码复用与可维护性

最新推荐文章于 2025-06-13 10:11:24 发布

原创最新推荐文章于 2025-06-13 10:11:24 发布 · 1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端框架 #前端 #Hook #vue3.js

vue3 专栏收录该内容

35 篇文章

订阅专栏

前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，

求个收藏 + 关注啦～后续还有超多惊喜，别错过！

引言

在 Vue 3 中，组合式 API（Hook）是一项强大的特性，它允许开发者以函数的形式组织逻辑，从而提高代码的复用性和可维护性。本文将深入介绍 Vue 3 中 Hook 的使用方法、常见场景以及如何创建自定义 Hook。

一、Vue 3 Hook 基础

1. 什么是 Hook

Hook 是 Vue 3 组合式 API 中的核心概念，它是一个函数，用于封装和复用有状态的逻辑。通过使用 Hook，我们可以将相关的逻辑提取到一个函数中，然后在多个组件中复用。

2. 基本使用

以下是一个简单的 Hook 示例，用于实现计数器功能：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 自定义 Hook
function useCounter() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  return {
    count,
    increment
  };
}

// 使用 Hook
const { count, increment } = useCounter();
</script>

在这个示例中，useCounter 是一个自定义 Hook，它封装了计数器的逻辑。在组件中，我们通过解构赋值的方式使用 useCounter 返回的状态和方法。

二、常见 Hook 场景

1. 数据获取

在实际开发中，我们经常需要从服务器获取数据。可以使用 Hook 来封装数据获取的逻辑，提高代码的复用性。

<template>
  <div>
    <p v-if="loading">Loading...</p>
    <p v-else-if="error">{{ error }}</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 自定义 Hook
function useFetch(url) {
  const data = ref(null);
  const loading = ref(true);
  const error = ref(null);

  const fetchData = async () => {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      data.value = await response.json();
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  };

  onMounted(fetchData);

  return {
    data,
    loading,
    error
  };
}

// 使用 Hook
const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1');
</script>

在这个示例中，useFetch 是一个自定义 Hook，用于封装数据获取的逻辑。在组件中，我们通过调用 useFetch 来获取数据，并根据状态显示不同的内容。

2. 表单验证

在处理表单时，表单验证是一个常见的需求。可以使用 Hook 来封装表单验证的逻辑。

<template>
  <form @submit.prevent="submitForm">
    <input v-model="username" placeholder="Username">
    <p v-if="usernameError">{{ usernameError }}</p>
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

// 自定义 Hook
function useFormValidation() {
  const username = ref('');
  const usernameError = ref('');

  const validateUsername = () => {
    if (username.value.length < 3) {
      usernameError.value = 'Username must be at least 3 characters long';
    } else {
      usernameError.value = '';
    }
  };

  const submitForm = () => {
    validateUsername();
    if (!usernameError.value) {
      // 表单验证通过，执行提交逻辑
      console.log('Form submitted successfully');
    }
  };

  return {
    username,
    usernameError,
    submitForm
  };
}

// 使用 Hook
const { username, usernameError, submitForm } = useFormValidation();
</script>

在这个示例中，useFormValidation 是一个自定义 Hook，用于封装表单验证的逻辑。在组件中，我们通过调用 useFormValidation 来处理表单输入和验证。