問題背景
今天幫忙解決問題的時候遇到了一個很奇怪的問題，點擊一個按鈕跳轉的另一個頁面，他的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>更能解釋這個問題的了。
一開始學習router-view我並沒有深入，僅僅是記住了他是一個作爲父子組件嵌套路由跳轉的工具，沒有想到他還會有此番功能。下面我貼出當時代碼的輪廓供大家分析。
組件A,組件B，以及容器C。點擊組件A可以跳轉到組件B，而C作爲A組件的容器存在。
A
<item @click="gotoB">
點我，跳轉到B
</item>
<router-view></router-view>
B
<p>
123321
</p>
C
<A></A>
<input></input>
<A></A>
<router-view></router-view>
好了，註冊過程都省略，下面問點擊第一個A，會出現幾個123321,正確答案 3個。
雖說C中的2個A作爲獨立的組件出現，但是細想想，這樣引入組件，會導致頁面中存在三個,從而導致了同樣的組件被渲染了三次，但是他們還是同一個！
總結
其實這個問題說解決也很好解決，如果按照正常的寫代碼方式說不定永遠也不會遇到，核心就是，不要在組件中使用<router-view>啊！
說在最後
遇到bug並不可怕，怕的是你在解決的道路上不斷被他打擊到放棄。其實解決bug，如果你是拷貝的別人的代碼，而且已知代碼在其他人那裏一致，我一般會採取控制變量法，將這段代碼作爲一個黑盒子，傳入相同的參數，然後逐行debugger，看看哪些變量是和原版有出入的，往往越小的地方越可能出問題，比如參數的傳遞，請求的發起等等（這點幫助我解決了很多問題）。