關於Vue生命週期的思考 zzky

2021-09-19 09:03:35 字數 991 閱讀 4403

關於vue元件生命週期,官方圖示:

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

在社群交流中對於新手經常遇到這個問題。為什麼跳轉相同路由不能跳轉?對於新手來說,跳轉和不跳轉的區別在於資料有沒有更新。

新手在用vue-router 的時候,沒有關注當前vue例項(vm)中新增route。回歸到話題問題當訪問.../page/110這個路由的時候,開始裝載vue-router 中註冊page對應vue例項。 我們先約定是page.vuepage.vue開始它的生命週期,如果沒有使用過vue-route會根據經驗把資料更新寫到 created 或者 ready 階段。路由切換了,但是created ready 階段都過了,裝資料的盒子準備好了。但是資料更新的時期過了導致不能更新。

這時候,我們需要把資料更新的時機換到路由切換的時候。

如下**:

export default        

}...

};

這樣路由切換的時候,更新資料,也就是所謂的跳轉了。

注意:更新paramsquery都適用

基於上面如何更新子元件?一般情況下,同樣更新資料放倒 route.data 中即可,向子元件中傳遞資料。隨著route切換更新子元件資料。

開發過程中,遇到的乙個特殊的例子。把輪播圖做成元件,在這個元件中ready後,開始使用輪播外掛程式。輪播外掛程式是會破壞html結構。導致不能資料更新的時候,不能更新view。這時候解決辦法是再讓子元件帶著新資料走一輪生命週期。

如何強制更新元件的生命週期?解決辦法是 route.data 資料更新的時候。讓子元件v-if="false",非同步獲取資料之後,再v-if="true"

說了一堆廢話,彙總下:v-if 會影響子元件的生命週期。

vue 關於生命週期

序言 1.vue 單元件的生命週期 2.vue 父子元件的生命週期 3.axios 非同步請求 與 vue 的元件週期 vue的生命週期 淺白 簡單總結 1.beforecreate 此時 el data 的值都為 undefined 2.created 此時可以拿到 data 中的值,但是 thi...

關於vue的生命週期

關於vue的生命週期我們來看下這個官方的圖 從圖中我們很容易看的出vue元件的生命週期的鉤子函式有以下這些 下面分別說以下這些生命週期 beforecreate 這個生命週期如上圖所示 例項初始化在這個生命週期遍歷 data 物件下所有屬性將其轉化為 getter setter,也就是說新增乙個被觀...

vue生命週期

beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...