Vue 3 Composition API实战：构建响应式表单与验证

在 Vue.js 的发展历程中，Composition API 作为 Vue 3 的核心特性之一，为开发者带来了更加灵活和强大的代码组织方式。本文将详细探讨如何使用Composition API 来构建响应式表单，集成表单验证功能，并提供了具体实践应用代码示例。

Composition API旨在解决Options API在大型项目中代码组织复杂、逻辑复用困难等问题。通过Composition API，我们可以将相关的逻辑（如状态管理、生命周期钩子、方法等）封装在一个单独的setup函数中，使得代码更加模块化和可维护。

一、设置项目环境

首先，确保你已经安装了 Node.js 和 Vue CLI。通过 Vue CLI 创建一个新的 Vue 3 项目：

vue create vue3-composition-form
cd vue3-composition-form
vue add vue-next

选择 Vue 3 配置完成安装。

二、构建响应式表单

在 Vue 3 中，我们可以利用 reactive 和 ref 函数来创建响应式数据。以下是一个简单的用户表单示例：

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="username">用户名:</label>
      <input id="username" v-model="form.username" type="text">
    </div>
    <div>
      <label for="email">电子邮件:</label>
      <input id="email" v-model="form.email" type="email">
    </div>
    <button type="submit">提交</button>
  </form>
</template>

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

const form = reactive({
  username: '',
  email: '',
});

function submitForm() {
  console.log(form);
}
</script>

三、集成表单验证

为了增强表单的健壮性，需要集成表单验证。使用自定义函数来实现简单的验证逻辑：

<script setup>
import { reactive, watch } from 'vue';

const form = reactive({
  username: '',
  email: '',
  errors: {}
});

function validateForm() {
  const errors = {};
  if (!form.username.trim()) {
    errors.username = '用户名不能为空';
  }
  if (!form.email.trim() || !/^\S+@\S+\.\S+$/.test(form.email)) {
    errors.email = '电子邮件格式不正确';
  }
  form.errors = errors;
  return Object.keys(errors).length === 0;
}

watch(() => form.username || form.email, () => {
  validateForm();
});

function submitForm() {
  if (validateForm()) {
    console.log('表单验证通过', form);
    // 这里可以添加提交到服务器的逻辑
  }
}
</script>

<template>
  <!-- 省略表单 HTML 结构 -->
  <div v-if="form.errors.username">{{ form.errors.username }}</div>
  <div v-if="form.errors.email">{{ form.errors.email }}</div>
</template>

在上面的代码中，我们定义了一个 errors 对象来存储验证错误信息，并通过 watch 函数监听表单字段的变化，实时调用 validateForm 进行验证并即时显示验证结果。提交表单前也会进行验证，确保数据的有效性。

四、总结

通过 Vue 3 的 Composition API，我们能够以更加模块化和可复用的方式构建复杂的表单逻辑。结合响应式数据和自定义验证函数，可以轻松实现表单的实时验证和错误提示，提升用户体验。以上代码示例展示了如何在 Vue 3 项目中实践这一思路，希望能为大家带来启发和帮助。