關於Vue生命週期的思考[zzky]

關於Vue生命週期的思考

關於Vue組件生命週期，官方圖示：

在開發過程當中遇到關於生命週期的問題，整理分享下：

Vue-router跳轉同名路徑的問題

問題來自：vue-router 跳轉同名路徑的問題

在社區交流中對於新手常常遇到這個問題。爲何跳轉相同路由不能跳轉？對於新手來講，跳轉和不跳轉的區別在於數據有沒有更新。

新手在用Vue-router 的時候，沒有關注當前Vue實例(vm)中添加route 。迴歸到話題問題當訪問.../page/110這個路由的時候，<router-view ></router-view> 開始裝載Vue-router 中註冊page對應Vue實例。 咱們先約定是 page.vue ：page.vue 開始它的生命週期，若是沒有使用過Vue-route會根據經驗把數據更新寫到 created 或者 ready 階段。路由切換了，可是created ready 階段都過了，裝數據的盒子準備好了。可是數據更新的時期過了致使不能更新。

這時候，咱們須要把數據更新的時機換到路由切換的時候。

以下代碼：

export default {
      ...
    route: {
        data(transition) {
           //更新數據的方法    
        }       
    }
      ...
};

這樣路由切換的時候，更新數據，也就是所謂的跳轉了。

注意：更新params query 都適用

利用v-if強制結束組件的生命週期

基於上面如何更新子組件？通常狀況下，一樣更新數據放倒 route.data 中便可，向子組件中傳遞數據。隨着route切換更新子組件數據。

開發過程當中，遇到的一個特殊的例子。把輪播圖作成組件，在這個組件中ready後，開始使用輪播插件。輪播插件是會破壞html結構。致使不能數據更新的時候，不能更新View。這時候解決辦法是再讓子組件帶着新數據走一輪生命週期。

如何強制更新組件的生命週期？解決辦法是 route.data 數據更新的時候。讓子組件 v-if="false" ，異步獲取數據以後，再 v-if="true"。

說了一堆廢話，彙總下：v-if 會影響子組件的生命週期。