Vue2.0生命週期及路由導航守衛

Vue的生命週期，有的時候還是會不熟悉的樣子，找了點相關的文章，然後自己嘗試着做了點示例，這裏記錄下，說不定面試就用上了

1.Vue生命週期的相關圖片

2.Vue生命週期及路由的鉤子函數

• beforeCreate

實例初始化之後，初始化注入(init injections)及響應(reactivity)前被調用

• created

實例已經創建完成之後被調用，屬性已綁定，但DOM還未生成，$el爲undefined
這裏要視情況來定，根據你的業務來判斷是否可以在這裏進行ajax請求

• beforeMounted

在這裏之前會根據是否有el元素及是否有內置的template模板來進行選擇
沒有el則在vm.mounted(el)調用之後再往下執行，沒有內置的模板則使用外層的template模板
模板編譯、掛載之前，此時$el還是undefined

• mounted

實例掛載到頁面上，此時可以訪問$el

• beforeDestroy

在組件銷燬之前調用，這裏依然可以訪問$el
這裏可以做一些重置的操作，比如清除掉組件中的 定時器 和 監聽的dom事件

• destroy

組件銷燬

路由導航守衛

要調用next()不然頁面會卡在中途

• beforeRouteEnter

路由進入的時候調用，在組件beforeCreate前
此時還沒有組件實例，this爲undefined，組件實例還沒有被創建
beforeRouteEnter 是支持給 next 傳遞迴調的唯一守衛
對於 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支持傳遞迴調

• beforeRouteUpdate

在當前路由改變，但是該組件被複用時調用
對於一個帶有動態參數的路徑 /index/:id，在 /index/1 和 /index/2 之間跳轉的時候
由於會渲染同樣的 Index 組件，因此組件實例會被複用。而這個鉤子就會在這個情況下被調用

• beforeRouteLeave

離開守衛通常用來禁止用戶在還未保存修改前突然離開,該導航可以通過 next(false) 來取消

3.示例代碼

• 我這裏是用了webpack打包來做的，並沒有用new Vue來新建

<script>
  export default {
    data() {
      return {
        time: ''
      }
    },
    beforeCreate() {
      console.log('beforeCreate: 生命週期之beforeCreate');
      console.log(this.$el);
    },
    created() {
      /* 實例已經創建完成之後被調用，屬性已綁定，但DOM還未生成，$el爲undefined */
      console.log('created: 生命週期之created')
      console.log(this.$el);
      /*
       * route是一個跳轉的路由對象
       * 每一個路由都會有一個route對象，是一個局部的對象
       * 可以獲取對應的name,path,params,query等
       * */
      console.log(this.$route);

      /*
       * $router是VueRouter的一個對象
       * 通過Vue.use(VueRouter)和VueRouter構造函數得到一個router的實例對象
       * 這個對象是一個全局的對象，他包含了所有的路由
       * */
      console.log(this.$router);
    },
    beforeMount() {
      console.log('beforeMount: 生命週期之beforeMount');
      console.log(this.$el);
    },
    mounted() {
      console.log('mounted: 生命週期之mounted');
      console.log(this.$el);
      this.time = '2018';
    },
    /* 路由的生命週期 */
    beforeRouteEnter(to, from, next) {
      /*
       * 此時還沒有組件實例，this爲undefined，組件實例還沒有被創建
       * beforeRouteEnter 是支持給 next 傳遞迴調的唯一守衛
       * 對於 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支持傳遞迴調
       *
       * */
      console.log('beforeRouteEnter: 進入路由');
      /* 在這裏用this無法獲取vue實例，但可以在next()回調裏訪問組件實例 */
      console.log(this);
      /*
       * 要調用next()方法
       * next()進行管道中的下一個鉤子
       * 如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)
       * */
      // next();

      /* next()回調裏訪問組件實例 */
      next(vm => {
        /* 這裏的打印是在mounted之後 */
        console.log(vm);
      })
    },
    beforeRouteUpdate(to, from, next) {
      console.log('beforeRouteUpdate: 路由更新');
      console.log(this.$route);
      next();
    },
    beforeRouteLeave(to, from, next) {
      /*
      * 離開守衛通常用來禁止用戶在還未保存修改前突然離開
      * 該導航可以通過 next(false) 來取消
      * 使用next(false)，頁面依然停留在當前頁面，組件的beforeDestroy和destroy生命週期不執行
      * */
      console.log('beforeRouteLeave: 離開該組件對應的路由');
      console.log(this.$route);
      next();
      // next(false);
    },
    beforeUpdate() {
      console.log('beforeUpdate: 生命週期之beforeUpdate');
      console.log(this.$el);
    },
    updated() {
      console.log('updated: 生命週期之updated');
      console.log(this.$el);
    },
    beforeDestroy() {
      /* 這裏做一些重置的操作，比如清除掉組件中的 定時器 和 監聽的dom事件 */
      console.log('beforeDestroy: 生命週期之beforeDestroy');
      console.log(this.$el);
    },
    destroyed() {
      console.log('destroy: 生命週期之destroy');
      console.log(this.$el);
    }
  }
</script>

輸出圖片

• 路由爲/routerIndex時

• 當組件被複用時，路由爲/routerIndex?id=1

離開當前路由時

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期好文推薦：

  • 判斷iOS和Android及PC端
  • 純css實現瀑布流（multi-column多列及flex佈局）
  • 實現單行及多行文字超出後加省略號
  • 微信小程序之購物車和父子組件傳值及calc的注意事項