關(guān)于Vue組件生命周期袭景，官方圖示：
在開發(fā)過程中遇到關(guān)于生命周期的問題佃迄，整理分享下：
Vue-router跳轉(zhuǎn)同名路徑的問題
問題來自：vue-router 跳轉(zhuǎn)同名路徑的問題
在社區(qū)交流中對(duì)于新手經(jīng)常遇到這個(gè)問題哈街。為什么跳轉(zhuǎn)相同路由不能跳轉(zhuǎn)夺饲？對(duì)于新手來說装盯，跳轉(zhuǎn)和不跳轉(zhuǎn)的區(qū)別在于數(shù)據(jù)有沒有更新废睦。
新手在用Vue-router 的時(shí)候伺绽，沒有關(guān)注當(dāng)前Vue實(shí)例(vm)中添加route 。回歸到話題問題當(dāng)訪問.../page/110這個(gè)路由的時(shí)候奈应，<router-view ></router-view> 開始裝載Vue-router 中注冊(cè)page對(duì)應(yīng)Vue實(shí)例澜掩。 我們先約定是 page.vue ：page.vue 開始它的生命周期，如果沒有使用過Vue-route會(huì)根據(jù)經(jīng)驗(yàn)把數(shù)據(jù)更新寫到 created 或者 ready 階段杖挣。路由切換了肩榕，但是created ready 階段都過了，裝數(shù)據(jù)的盒子準(zhǔn)備好了惩妇。但是數(shù)據(jù)更新的時(shí)期過了導(dǎo)致不能更新株汉。
這時(shí)候，我們需要把數(shù)據(jù)更新的時(shí)機(jī)換到路由切換的時(shí)候歌殃。
如下代碼：
export default {
...
route: {
data(transition) {
//更新數(shù)據(jù)的方法
}
}
...
};
這樣路由切換的時(shí)候乔妈，更新數(shù)據(jù)，也就是所謂的跳轉(zhuǎn)了氓皱。
注意：更新params query 都適用
利用v-if強(qiáng)制結(jié)束組件的生命周期
基于上面如何更新子組件路召？一般情況下，同樣更新數(shù)據(jù)放倒 route.data 中即可波材，向子組件中傳遞數(shù)據(jù)股淡。隨著route切換更新子組件數(shù)據(jù)。
開發(fā)過程中廷区，遇到的一個(gè)特殊的例子唯灵。把輪播圖做成組件，在這個(gè)組件中ready后躲因，開始使用輪播插件早敬。輪播插件是會(huì)破壞html結(jié)構(gòu)。導(dǎo)致不能數(shù)據(jù)更新的時(shí)候大脉，不能更新View搞监。這時(shí)候解決辦法是再讓子組件帶著新數(shù)據(jù)走一輪生命周期。
如何強(qiáng)制更新組件的生命周期镰矿？解決辦法是 route.data 數(shù)據(jù)更新的時(shí)候琐驴。讓子組件 v-if="false" ，異步獲取數(shù)據(jù)之后秤标，再 v-if="true"绝淡。
說了一堆廢話，匯總下：v-if 會(huì)影響子組件的生命周期苍姜。
