Vue 구성 요소 와 Route 의 생명주기 실례 상세 설명

먼저 실제 적 인 것 을 말 하 다.
실 용적 인 갈고리:
Created:vue 인 스 턴 스 가 생 성 된 수명 주기 갈고리 함수 입 니 다.(페이지 초기 화 데이터 불 러 오기 보통 여기에 쓰 기;
beforeCreate:loading 인터페이스 created 에 loading 을 취소 합 니 다.
beforeDestory:XX 를 삭제 하 시 겠 습 니까?
destoryed:현재 구성 요소 가 삭제 되 었 습 니 다.관련 내용 을 비 웁 니 다.
Vue 구성 요소 의 수명 주기 에 대해 서 는 다음 과 같이 번역 합 니 다.

module.exports = { 
    //props: ['      '], 
    data:function(){ 
      lifecycle.push("data"); 
      return { 
        msg: '    ，         ，message from my-views', 
        title:'my_views', 
        lifecycle: lifecycle 
      } 
    }, 
    //   route      
    route:{ 
      //waitForData: true, //             ，            ，       ，        
      canActivate:function(transition){ 
        // canActivate  ，            (       ) 
        //      ，                。 
      }, 
      activate:function(transition){ 
                //         ，  activate    （ resolved ，        promise   resolve ）。              。(  ) 
        //this.$root.$set('header',this.title); 
        transition.next(); 
        //      ，api   afterActivate    
        // aftefActivate         $loadingRouteData        true 
      }, 
      data: function(transition) { 
        var _this = this; 
        //         ，  activate    （ resolved ，        promise   resolve ）。               
        //                 
        if(this.$root.myViewsData){ 
          this.$data = this.$root.myViewsData; 
          transition.next(); 
          console.log('            '); 
          return; 
        } 
        //          
        this.$root.myViewsData = this.$data; 
        setTimeout(function(){ 
          //   _this.$loadingRouteData   true 
          transition.next({msg:'      '}); 
          //    transition.next  ，_this.$loadingRouteData   false 
        }.bind(this),4000); 
      }, 
      canDeactivate:function(transition){ 
        //      ，                。(       ) 
      }, 
      deactivate: function (transition) { 
        //      ，                  。(  ) 
      } 
    }, 
    beforeCreate:function(){ 
      //         ，    (data observer)   event/watcher          。 
    }, 
    created:function(){ 
      //              。    ，          ：    (data observer)，        ， watch/event     。  ，        ，$el        。 
    }, 
    beforeCreate:function(){ 
      //         ，    (data observer)   event/watcher          。 
    }, 
    mounted:function(){ 
      // el       vm.$el   ，               。   root             ，  mounted      vm.$el      。 
    }, 
    beforeUpdate: function(){ 
      //        ，      DOM           。  
      //                  ，             。 
    }, 
    updated: function(){ 
      //             DOM         ，          。 
      //         ，   DOM     ，             DOM    。         ，             ，              。 
    }, 
    // <keep-alive>        ，           ，       。 
    activated: function(){ 
      // keep-alive        。 
    }, 
    deactivated: function(){ 
      // keep-alive        。 
    }, 
    beforeDestroy:function(){ 
      //         。    ，        。 
    }, 
    destroyed:function(){ 
      // Vue        。   ，Vue               ，            ，           。 
    } 
  } 

총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 구성 요소 와 Route 의 생명주기 에 대한 상세 한 설명 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!