关于iview中[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.影响性能的问题

刚开始使用某种框架或者技术都是自己挖坑自己跳，坑挖的不亦乐乎，跳进去的时候毫不知情，等到真的发现要出坑，才会哭笑不得。。。。

比如这个看是很小的问题，当初赶项目不求甚解，，，以为只是个简单的warn，不会影响啥；到头来才发现这么个小小的warn居然让用户体验达到了令人发指的程度。。。。

哎，记住这次教训，页面上尽量达到一个错误提示都不要报才是对自己好~

好了，讲讲问题：

代码是这样的，一个下拉框，选中下拉框中的数据，页面其他位置的数据发生相应变化（需求相当简单

）

<Select
v-if="showTemplateSelection=='-1'" @on-change="getTemplateData"
v-model="templateid"
style="width:200px;">
<Option
v-for="item
in cardTypeVoList" :value="item.cardTypeId" :key="item">{{
item.cardTypeName }}</Option>
</Select>

问题出在使用v-for循环的时候，后面写的
:key="item"上，这里的item明显是个对象，而不是string/number数据类型，导致报了一连串的vue
warn，从而导致影响了后续的数据渲染性能。。。。

正确写法应该是：

:key="item.cardTypeName"
:key相当于是索引的作用，提高循环性能，如果循环量较小，不写也可以的。

好了，分享到此结束。。。所谓细节决定成败，看来还是不细心啊~哈哈