頁面加載的時候，vue生命周期的觸發順序是怎樣的呢？
那麼進入某個路由對應的元件的時候，我們會觸發哪些類型的周期呢？
根執行個體的加載相關的生命周期(beforeCreate、created、beforeMount、mounted)
元件執行個體的加載相關的生命周期(beforeCreate、created、beforeMount、mounted)
全局路由勾子(router.beforeEach)
元件路由勾子(beforeRouteEnter)
元件路由勾子的next裡的回調(beforeRouteEnter)
指令的周期(bind,inserted)
nextTick方法的回調
接下來，讓我們用vue-cli簡單改造後的項目，做一個測試，看看各個聲明周期的觸發順序是怎樣的
main.js：
router.beforeEach((to, from, next) => {
console.log('路由全局勾子：beforeEach')
next()
})
router.afterEach((to, from) => {
console.log('路由全局勾子：afterEach')
})
new Vue({
beforeCreate () {
console.log('根元件：beforeCreate')
},
created () {
console.log('根元件：created')
},
beforeMount () {
console.log('根元件：beforeMount')
},
mounted () {
console.log('根元件：mounted')
}
el: '#app',
router,
template: '',
components: { App }
})
test.vue
test
beforeRouteEnter (to, from, next) {
console.log('元件路由勾子：beforeRouteEnter')
next(vm => {
console.log('元件路由勾子beforeRouteEnter的next')
})
},
beforeCreate () {
console.log('元件：beforeCreate')
},
created () {
this.$nextTick(() => {
console.log('nextTick')
})
console.log('元件：created')
},
beforeMount () {
console.log('元件：beforeMount')
},
mounted () {
console.log('元件：mounted')
},
directives: {
ooo: {
bind (el, binding, vnode) {
console.log('指令binding')
},
inserted (el, binding, vnode) {
console.log('指令inserted')
}
}
}
}
接下來，直接進入test.vue對應的路由。在控制台，我們看到如下的輸出
我們看到執行的順序為
路由勾子 (beforeEach、beforeRouteEnter、afterEach)
根元件 (beforeCreate、created、beforeMount)
元件 (beforeCreate、created、beforeMount)
指令 (bind、inserted)
元件 mounted
根元件 mounted
beforeRouteEnter的next的回調
nextTick
結論
路由勾子執行周期非常早，甚至在根執行個體的渲染之前
具體的順序 router.beforeEach > beforeRouteEnter > router.afterEach
tip:在進行路由攔截的時候要避免使用執行個體内部的方法或屬性。
在開發項目時候，我們腦門一拍把，具體攔截的程式，寫在了根執行個體的方法上了，到beforeEach去調用。結果導緻整個攔截的周期，推遲到執行個體渲染的之後。
是以對于一些路由元件的beforeRouteEnter裡的請求并無法攔截，頁面看上去好像已經攔截下來了。實際上請求依然發了出去，beforeRouteEnter内的函數依然執行了。
指令的綁定在元件mounted之前，元件的beforeMount之後
不得不提的, beforeRouteEnter的next勾子
beforeRouteEnter的執行順序是如此靠前，而其中next的回調勾子的函數，執行則非常靠後，在mounted之後！！
我們通常是在beforeRouteEnter中加載一些首屏用資料，待資料收到後，再調用next勾子，通過回調的參數vm将資料綁定到執行個體上。
是以，請注意next的勾子是非常靠後的。
nextTick
越早注冊的nextTick觸發越早