面试题：Vue复杂表单v-model在动态渲染及数据校验场景下的深度应用

实现思路

动态渲染字段的数据绑定：
- Vue的响应式原理基于Object.defineProperty() 或 Proxy（Vue 3.x）来实现数据劫持。对于动态渲染的表单字段，我们需要将其数据状态添加到Vue实例的data中，以确保Vue能够追踪到数据的变化。
- 当动态渲染字段时，使用v - model指令将表单元素的值与data中的对应属性进行双向绑定。
数据校验的实时性和准确性：
- 实时性：利用Vue的watch选项，当动态字段的数据发生变化时，立即触发校验函数。
- 准确性：在校验函数中，根据业务规则对数据进行验证。可以使用正则表达式、自定义校验函数等方式。同时，结合Vue的生命周期方法，在合适的时机初始化校验规则和数据状态。例如，在created钩子函数中初始化校验规则相关的数据，在mounted钩子函数中对已经渲染的动态字段进行初始校验。

代码示例

<template>
  <div>
    <button @click="addField">添加字段</button>
    <div v - for="(field, index) in fields" :key="index">
      <input type="text" v - model="field.value" />
      <span v - if="field.error" style="color: red">{{field.error}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: []
    };
  },
  methods: {
    addField() {
      this.fields.push({
        value: '',
        error: ''
      });
    },
    validateField(field) {
      // 简单示例：校验输入不能为空
      if (field.value === '') {
        field.error = '字段不能为空';
      } else {
        field.error = '';
      }
    }
  },
  watch: {
    fields: {
      deep: true,
      handler(newFields) {
        newFields.forEach(field => {
          this.validateField(field);
        });
      }
    }
  },
  created() {
    // 可以在这里初始化一些全局的校验规则等
  },
  mounted() {
    // 对已有的动态字段进行初始校验
    this.fields.forEach(field => {
      this.validateField(field);
    });
  }
};
</script>

上述代码中，通过点击按钮动态添加表单字段，每个字段都有一个value用于数据绑定，以及一个error用于显示校验错误信息。watch选项配合deep属性可以实时监听fields数组中每个对象的变化，从而触发校验函数。在created和mounted钩子函数中分别进行初始化和初始校验操作。

星途面试题库

面试题：Vue复杂表单v-model在动态渲染及数据校验场景下的深度应用

知识考点

面试题答案

实现思路

代码示例