vue mounted方法执行多次问题的解决方案

问题背景

今天帮忙解决问题的时候遇到了一个很奇怪的问题，点击一个按钮跳转的另一个页面，他的mounted方法执行了三遍，想到这个问题我确实是很困惑的，查阅网络资料说是v-if和v-show的问题，线下我自己验证了一下，确实没有找到使用v-if会导致mounted多次的情况。

解决思路

首先遇到这个问题我就在思考，是不是某些原因引发了组件生命周期的消亡，于是我在mounted函数周围添加了destroyed钩子，我在里面打印了内容，结果证明并没有执行，也就是组件就是结结实实的出现了三个，每一个都没有消亡。

既然这样，那我下一步去验证了组件本身是否具有什么特殊函数或者操作，会导致自身触发三次声明周期呢？毕竟按钮的点击事件以及路由跳转都执行了一次，结果证明本身并没有什么特殊的代码能做到这一事情（组件调用生命周期三次，确实有点匪夷所思）。

事情到了这里仿佛进入了一个死循环，让人无从下手。这时候我默默打开了f12 ,试图从dom元素中查看出一些端倪，果然f12中显示的情况和预料的一样，有三个组件罗列在dom元素底部，下面分别为每一个元素设置display: none,事实表明确实是是三个独立的dom节点，**山重水复疑无路，柳暗花明又一村。**这个时候我发现了一个很特殊的情况，每个元素的标致信息是一致的，何为标致信息，之前我总结过一篇vue中scoped的使用，那篇文章说说过，会为dom生成data-a6disalv 等标致信息来避免css污染问题【日常总结还是很有用的】。

这个时候如果思考的更进一步，就会意识到，这三个组件，并不是一个一个生成的，他们是三个一起生成的！属于并列操作，接下来的事情更加印证了这一点，我点击关闭组件的按钮之后，点击一个，其他的组件也会跟着消失掉。这个时候问题就很清晰了，没有什么能比更能解释这个问题的了。

一开始学习router-view我并没有深入，仅仅是记住了他是一个作为父子组件嵌套路由跳转的工具，没有想到他还会有此番功能。下面我贴出当时代码的轮廓供大家分析。

组件A,组件B，以及容器C。点击组件A可以跳转到组件B，而C作为A组件的容器存在。

A

    点我，跳转到B

B

    123321

C

好了，注册过程都省略，下面问点击第一个A，会出现几个123321,正确答案 3个。

虽说C中的2个A作为独立的组件出现，但是细想想，这样引入组件，会导致页面中存在三个,从而导致了同样的组件被渲染了三次，但是他们还是同一个！

总结

其实这个问题说解决也很好解决，如果按照正常的写代码方式说不定永远也不会遇到，核心就是，不要在组件中使用啊！

说在最后

遇到bug并不可怕，怕的是你在解决的道路上不断被他打击到放弃。其实解决bug，如果你是拷贝的别人的代码，而且已知代码在其他人那里一致，我一般会采取控制变量法，将这段代码作为一个黑盒子，传入相同的参数，然后逐行debugger，看看哪些变量是和原版有出入的，往往越小的地方越可能出问题，比如参数的传递，请求的发起等等（这点帮助我解决了很多问题）。