【vue3】写hook这几天，治好了我不会组件封装的弱点。-阿里云开发者社区

【vue3】写hook这几天，治好了我不会组件封装的弱点。

2024-08-09 118

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【vue3】写hook这几天，治好了我不会组件封装的弱点。

Vue 3 引入了 Composition API，这种新的 API 提供了一种更灵活、更强大的方式来组织和复用逻辑。Composition API 中的钩子（hooks）使得我们能够将组件的逻辑提取到独立的可复用函数中。这不仅提高了代码的可维护性，还增强了逻辑复用性。本文将详细介绍如何使用 Vue 3 的 Hook 实现组件封装，并提供具体的示例代码。

介绍

Composition API 是 Vue 3 中的一项重要特性，它允许我们在单独的函数中组织和复用逻辑，从而避免了 Options API 中逻辑的分散。通过使用 Composition API，我们可以创建自定义的 Hook，将逻辑封装在这些 Hook 中，并在多个组件中复用它们。

安装 Vue 3

如果你还没有安装 Vue 3，可以通过以下步骤进行安装：

使用 Vue CLI

npm install -g @vue/cli
vue create my-vue3-project
cd my-vue3-project
npm run serve

使用 Vite

npm create vite@latest my-vue3-project --template vue
cd my-vue3-project
npm install
npm run dev

什么是 Hook

在 Vue 3 中，Hook 是一个普通的函数，使用 Composition API 实现的逻辑复用。我们可以将组件的状态和逻辑提取到一个 Hook 中，然后在需要的组件中调用这个 Hook。

使用 Hook 封装逻辑

创建 Hook

创建一个 Hook 函数，将组件的逻辑封装在这个函数中。例如，我们创建一个 useCounter Hook 来封装计数器的逻辑。

// hooks/useCounter.js
import { ref } from 'vue';
export function useCounter() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  const decrement = () => {
    count.value--;
  };
  return {
    count,
    increment,
    decrement
  };
}

在组件中使用 Hook

在组件中使用我们定义的 useCounter Hook。

<!-- components/Counter.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>
<script>
import { useCounter } from '../hooks/useCounter';
export default {
  setup() {
    const { count, increment, decrement } = useCounter();
    return { count, increment, decrement };
  }
};
</script>

示例：表单组件封装

下面我们通过一个实际的例子展示如何使用 Hook 封装表单逻辑。

创建表单 Hook

我们创建一个 useForm Hook 来封装表单的逻辑，包括表单的状态、验证和提交。

// hooks/useForm.js
import { reactive, ref } from 'vue';
export function useForm(initialValues, validate) {
  const values = reactive({ ...initialValues });
  const errors = ref({});
  const handleChange = (key, value) => {
    values[key] = value;
    errors.value[key] = validate(key, value);
  };
  const handleSubmit = (callback) => {
    const validationErrors = {};
    for (const key in values) {
      validationErrors[key] = validate(key, values[key]);
    }
    errors.value = validationErrors;
    if (Object.values(errors.value).every((error) => !error)) {
      callback(values);
    }
  };
  return {
    values,
    errors,
    handleChange,
    handleSubmit
  };
}

使用表单 Hook 封装表单组件

创建一个表单组件，并使用 useForm Hook 封装表单逻辑。

<!-- components/LoginForm.vue -->
<template>
  <form @submit.prevent="handleSubmit(onSubmit)">
    <div>
      <label for="username">Username</label>
      <input id="username" v-model="values.username" @input="handleChange('username', $event.target.value)" />
      <span>{{ errors.username }}</span>
    </div>
    <div>
      <label for="password">Password</label>
      <input type="password" id="password" v-model="values.password" @input="handleChange('password', $event.target.value)" />
      <span>{{ errors.password }}</span>
    </div>
    <button type="submit">Login</button>
  </form>
</template>
<script>
import { useForm } from '../hooks/useForm';
export default {
  setup() {
    const initialValues = {
      username: '',
      password: ''
    };
    const validate = (key, value) => {
      if (key === 'username' && !value) {
        return 'Username is required';
      }
      if (key === 'password' && !value) {
        return 'Password is required';
      }
      return '';
    };
    const { values, errors, handleChange, handleSubmit } = useForm(initialValues, validate);
    const onSubmit = (formValues) => {
      console.log('Form submitted:', formValues);
    };
    return {
      values,
      errors,
      handleChange,
      handleSubmit,
      onSubmit
    };
  }
};
</script>

总结

通过使用 Vue 3 的 Hook，我们可以将组件的逻辑提取到独立的函数中，从而实现逻辑的复用和封装。本文介绍了如何创建和使用 Hook，并通过一个表单示例展示了 Hook 的实际应用。通过掌握 Hook，你可以更好地组织和管理 Vue 3 应用中的逻辑，提高代码的可读性和可维护性。