面试题：Vue中Composition API在表单处理场景的应用

1. 使用Vue Composition API实现表单功能

初始化项目并安装Vue：假设已经初始化了一个Vue项目，在src/components目录下创建一个FormComponent.vue组件。

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="input1">输入框1:</label>
      <input v-model="formData.input1" type="text" id="input1" />
      <span v-if="errors.input1">{{ errors.input1 }}</span>
    </div>
    <div>
      <label for="select1">下拉框1:</label>
      <select v-model="formData.select1" id="select1">
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
      </select>
      <span v-if="errors.select1">{{ errors.select1 }}</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

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

// 表单数据
const formData = reactive({
  input1: '',
  select1: 'option1'
});

// 错误信息
const errors = reactive({
  input1: '',
  select1: ''
});

// 验证函数
const validateForm = () => {
  let isValid = true;
  if (formData.input1 === '') {
    errors.input1 = '输入框1不能为空';
    isValid = false;
  } else {
    errors.input1 = '';
  }
  if (formData.select1 === 'option1') {
    errors.select1 = '请选择其他选项';
    isValid = false;
  } else {
    errors.select1 = '';
  }
  return isValid;
};

// 提交处理函数
const handleSubmit = () => {
  if (validateForm()) {
    console.log('表单提交成功', formData);
  } else {
    console.log('表单验证失败');
  }
};

// 监听表单数据变化实时验证
watch(formData, () => {
  validateForm();
}, { deep: true });
</script>

<style scoped>
span {
  color: red;
}
</style>

2. Composition API相较于Options API在表单场景的优势

逻辑复用性更好：在Options API中复用逻辑通常通过mixins，但是mixins可能会导致命名冲突等问题。而Composition API通过将相关逻辑封装成函数，可以更方便地在不同组件间复用，比如表单验证逻辑可以封装成一个独立的函数，在多个表单组件中使用。
代码组织更清晰：Options API中数据、方法、生命周期钩子等都混合在一起，当组件变得复杂时，代码维护成本增加。Composition API可以按照逻辑功能将代码拆分成不同的函数，比如表单数据相关逻辑、验证逻辑、提交逻辑等，使得代码结构更加清晰，易于理解和维护。
更好的类型支持：对于使用TypeScript的项目，Composition API结合TypeScript可以提供更友好的类型推断和定义，在处理表单数据类型、验证函数参数类型等方面更加便捷和准确，而Options API在类型处理上相对较为繁琐。

星途面试题库

面试题：Vue中Composition API在表单处理场景的应用

知识考点

面试题答案

1. 使用Vue Composition API实现表单功能

2. Composition API相较于Options API在表单场景的优势