Vue路由以及組件生命周期之間的順序


先上vue生命周期圖。

這個生命周期圖很明確的順序,但是router這個時候會有所不同。

vue-router提供了三個鈎子,beforeRouterEnter、beforeRouterUpdate、beforeRouteLeave。

beforeRouterEnter是講道理是在最開始執行的,這個時候應該是沒有$el,沒有掛載,沒有this的。所以這個時候就沒有所謂的數據了,父組件子組件都沒有。但是很多時候我們要在這里面操作data。我們會傳入一個vm來獲取this,這個時候路由next里面的函數就要等到掛載完成以后才會執行。如果不傳入vm這時候beforeRouterEnter是最先執行的。
beforeRouterEnter(to,from,next){

  next(vm=>{

    //某些不可告人的操作

  })

}

這個時候你會發現你可以讀取this里面的所有東西,這個時候vm其實就等於this。

然后我打印了一下發現這時候父級組件子級組件和beforeRouterEnter打印的順序是 父級beforeCreate>父級created>父級beforeMount>子級beforeCreat>子級created>子級beforeMount>子級mounted>父級mounted>路由

其中前面的都比較好理解主要在路由和父級mounted兩個地方。開始設想路由因為要讀取vm所以需要等待this創建完成,應該是在created的時候就完成才對的,但是實際情況是路由在掛載完成后才執行的,我估計這個時候是怕數據的雙向綁定修改了router里面的值導致兩邊不一致所以選擇將路由放在最后執行。

父級的掛載是在子級組件掛載之后的,這個理解起來也容易,因為如果先掛載父級那么這個時候組件里面調用的數據在父級肯定讀取不到的這時候就會報未定義的錯誤了。

本來是想聊一下在computed里面的數據在各個階段的狀態,但是我還沒很明白啊,周末一定要好好看看。不看吃槍吃毒吃一切。。。。。。。。。。。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM