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

時間 2019-12-09

原文原文鏈接

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>