开发时遇到一个问题，复用element表单，通过v-if控制显示的表单项，一个状态是非必填输入框，另一个是必填输入框。从非必填的表单项切换为必填表单项后，去验证表单会出现验证通过的情况，但是必填项其实为空。

<template>
  <div class="div">
    <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
      <el-form-item v-if="flag" label="非必填：">
        <el-input v-model="formData.data"></el-input>
      </el-form-item>
      <el-form-item v-else label="必填：" prop="required">
        <el-input v-model="formData.required"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="clear">切换</el-button>
        <el-button @click="check">验证</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

出现这种情况的原因是，绑定验证规则是在mounted中执行的，验证规则改变后没有重新绑定，vue复用dom节点，验证规则就失效了，使用v-if的时候加一个唯一的key即可解决这个问题。