VUE.js在一个页面上使用同一个自定义组件多次时遇到的怪问题

问题

在一个页面上对同一个自定义组件调用了2次，代码如下：

<MyComponent
  v-if="type1 == 2"
  v-model="data1"
  name="标题A"  />

<MyComponent
  v-if="banner.type == 3"
  v-model="data2"
  name="标题B"  />

在页面上还有一组单选按钮，用来选择 type，当 type==2 时，显示上面的 name 是“标题A”的自定义组件，当 type==3 时，则显示下面的 name 是“标题B”的组件。 乍看之下，运行良好，当组件扩充里面有data部分时，问题出现了，对上面的组件实例进行操作导致 data 的值变化后，下面的组件实例的data部分也会跟着变，加入日志显示，两个实例似乎共享了data部分，props部分还保持自己的，没有被更改。

这不科学，不符合 VUE.js 手册上对用户自定义组件的描述，而且组件的data部分是函数，也是按照 VUE.js 手册的标准写法写的。

解决方法

后来发现是两次调用都有 v-if 一次只能出现一个导致 vue 在使用时混乱了导致，给每个对组件的引用都增加了key属性，并使用了不同的key值，问题得以解决。

<MyComponent
  v-if="type1 == 2"
  key="componentA"
  v-model="data1"
  name="标题A"  />

<MyComponent
  v-if="banner.type == 3"
  key="componentB"
  v-model="data2"
  name="标题B"  />