vue生命週期探究（二）

上一章咱們介紹了vue的組件生命週期和路由勾子，這一章，讓咱們來看看在vue-cli項目中，各個勾子的順序是如何的吧。主要聚焦在頁面加載的這條時間線。

頁面加載的時候，vue生命週期的觸發順序是怎樣的呢？

那麼進入某個路由對應的組件的時候，咱們會觸發哪些類型的週期呢？

1. 根實例的加載相關的生命週期（beforeCreate、created、beforeMount、mounted）

2. 組件實例的加載相關的生命週期(beforeCreate、created、beforeMount、mounted)

3. 全局路由勾子(router.beforeEach)

4. 組件路由勾子(beforeRouteEnter)

5. 組件路由勾子的next裏的回調(beforeRouteEnter)

6. 指令的週期(bind,inserted)

7. 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: '<App/>',
  components: { App }
})

test.vue

<template>
  <h1 v-ooo @click = "$router.push('/')">test</h1>
</template>
<script>
export default {
  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')
      }
    }
  }
}
</script>

接下來，直接進入test.vue對應的路由。在控制檯，咱們看到以下的輸出

咱們看到執行的順序爲

1. 路由勾子 (beforeEach、beforeRouteEnter、afterEach)

2. 根組件 (beforeCreate、created、beforeMount)

3. 組件 (beforeCreate、created、beforeMount)

4. 指令 (bind、inserted)

5. 組件 mounted

6. 根組件 mounted

7. beforeRouteEnter的next的回調

8. nextTick

結論

路由勾子執行週期很是早，甚至在根實例的渲染以前

具體的順序 router.beforeEach > beforeRouteEnter > router.afterEach

tip:在進行路由攔截的時候要避免使用實例內部的方法或屬性。
在開發項目時候，咱們腦門一拍把，具體攔截的程序，寫在了根實例的方法上了，到beforeEach去調用。
結果致使整個攔截的週期，推遲到實例渲染的以後。
所以對於一些路由組件的beforeRouteEnter裏的請求並沒有法攔截，頁面看上去好像已經攔截下來了。
實際上請求依然發了出去，beforeRouteEnter內的函數依然執行了。

指令的綁定在組件mounted以前，組件的beforeMount以後

不得不提的, beforeRouteEnter的next勾子

beforeRouteEnter的執行順序是如此靠前，而其中next的回調勾子的函數，執行則很是靠後，在mounted以後！！
咱們一般是在beforeRouteEnter中加載一些首屏用數據，待數據收到後，再調用next勾子，經過回調的參數vm將數據綁定到實例上。
所以，請注意next的勾子是很是靠後的。

nextTick

越早註冊的nextTick觸發越早

vue生命週期探究（一）