[VueJS] 重新檢視lifecycle 與vue-router - HINA | vue router enter
由於遇到了一些GooglereCAPTCHA的狀況,所以剛好找時間來重新檢視一下Vue元件的生命週期這件事。其實也不是Vue本身的問題,但是很奇妙的是,我真的就是遇到這種狀況。剛好複習一下也好。Lifecycle首先還是先複習一下官方這張說明圖片,https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram[1]接著回想一下我上次寫過,關於Vue-Router外面[2]的那些事情。然後我們來玩一下排列組合,在這邊只關注剛進去元件或是路由的情況,beforeRouteEnterbeforeCreatecreatedbeforeMountmounted再加上,原先beforeRouteEnter當中有next()可...
由於遇到了一些 Google reCAPTCHA 的狀況,所以剛好找時間來重新檢視一下 Vue 元件的生命週期這件事。其實也不是 Vue 本身的問題,但是很奇妙的是,我真的就是遇到這種狀況。
剛好複習一下也好。
Lifecycle首先還是先複習一下官方這張說明圖片,
https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram[1]
接著回想一下我上次寫過,關於 Vue-Router 外面[2]的那些事情。
然後我們來玩一下排列組合,在這邊只關注 剛進去 元件或是路由的情況,
beforeRouteEnter beforeCreate created beforeMount mounted再加上,原先 beforeRouteEnter 當中有 next() 可以使用,所以你會有這種用法,
beforeRouteEnter (to, from, next) { next(vm => { // 我們在這邊也算他是 Lifecycle 的一環 // 先簡稱他叫做 nextInVM }) }所以我們先假設他叫做 nextInVM 好了,那麼,這些東西實際的執行順序會是什麼呢?
beforeRouteEnter beforeCreate created beforeMount mounted nextInVM 元件內的執行順序只有單一元件的時候,執行結果確實會向上述那樣。假設,你包含了其他元件,舉例來說,
App - AComponent - BComponent - CComponent - DComponent那麼順序會是如何呢?首先,要先看你的 HTML 標籤順序 ,他會先決定元件的載入順序(大多數情況來說會依照此順序),如果上述的元件是這樣,
<app> <a-component></a-component> <b-component> <c-component></...