Vue v-if和v-show 以及v-if中遇到的坑

最近在项目开发中，遇到一个难以描述的问题：
问题是这样的

<FormItem label="类型" required>
    <RadioGroup v-model="formdata.radio1" @on-change="changetableType($event)">
        <Radio v-for="(item, index) in formdata.tabletypes" :key="index" :label="item"</Radio>
    RadioGroup>
FormItem>
<FormItem v-if="!(type === '1')" label="表1" required prop="table1">
    <Select v-model="formdata.table1">
        <Option v-for="(item, index) in formdata.tableone" :key="index" :value="item">{{item}}Option>
    Select>
FormItem>
<FormItem label="表2" required prop="table2">
    <Select v-model="formdata.table2">
        <Option v-for="(item, index) in formdata.tabletwo" :key="index" :value="item">{{item}}Option>
    Select>
FormItem>
<FormItem v-if="!(type === '2')" label="表3">
    <Input v-model="formdata.table3">Input>
FormItem>

选择某一个类型，下面的表单根据类型的不同而有不同的显示，由于涉及到表单的提交，需要进行验证，如果使用v-show的话，有些情况会导致验证不通过而无法提交，因此使用了v-if来实现。

而使用v-if就有一个问题，选择Radio中的某一项之后，下面的FormItem会进行切换，这样导致了很多表单的验证信息错乱的情况，即表单的验证信息与表单项不对应。
然后去看了Vue v-if这块的内容，才知道v-if默认会对组件进行复用，因此如果有相同的组件，他会优先去选择相同的组件来显示，而很明显我们这里的组件是要区分开的，因此这里使用key来解决，可以将组件区分开。

v-if 和 v-show的区别

v-if 是会对DOM节点进行操作的，为true的时候会添加组件，为false的时候会删除组件，而这种方式其实对于频繁改变状态的情况来说是不友好的，涉及到多次页面重绘；并且v-if默认是会对组件进行复用的，即如果显示的和不显示的组件是相同的组件，v-if是会复用这个组件的，如果想要区分开组件的话，需要使用key；另外，v-for的优先级是高于v-if的，这个也需要注意下。

v-show不管为true还是false，对应的组件已经在文档流中生成了，只是false时组件的display为none，有些时候还是有必要使用v-show来实现的。