切换el-select时显示的问题

前言：今天遇到个头大的问题，就是动态切换el-select组件返显问题。上图吧，一图胜万语。

 

 

 这个问题我想了大半天，不断的调试找问题。晚上偶然间看到了一个博客，感觉和我的问题相似。就看了下，果然啊，一语惊醒梦中人。就试了下，果然可以。心里爽啊。

分析下原因吧：（注意，下面中的截图中el-select中的key之前是没有的，这是我修改后的）

 再来看个效果，我在代码input加个属性。看看到底是不是复用了。

 

上面这个两个截图证明了，vue果然将input复用了！ 

既然vue复用了，我们要想一想怎么才能不让它复用保证唯一性，没错就是添加key，了解vue源码的都知道，如果没有添加key,vue会比较标签，如果标签一致就会复用，如果添加了key就先比较key,只要key不一致就不会复用。看来还是要多看源码啊。

再来分析下为什么使用了v-if本该销毁的组件，为什么还被复用了？

看下官网的解释，截图：

 也就是说根本原因是： vue 在切换的过程中，认为input不需要销毁重建，所以直接复用了。

问题解决了，下班回家啦，可以睡个好觉 啦，哈哈哈！