vue生命周期

以下主要從幾個方面來講：

1.vue的生命周期是什么

2.vue生命周期的在項目中的執行順序

3.vue中內置的方法 屬性和vue生命周期的運行順序（methods、computed、data、watch）

4.自己構造的方法與vue生命周期的運行順序 如show這些

5.總結

一、vue的生命周期是什么

vue每個組件都是獨立的，每個組件都有一個屬於它的生命周期，從一個組件創建、數據初始化、掛載、更新、銷毀，這就是一個組件所謂的生命周期。在組件中具體的方法有: beforeCreate  created beforeMount mountedbeforeUpdate  updated  activated deactivated beforeDestroy  destroyed
對應的中文就如其字面意思，英文不好的童鞋可以有道翻翻 好了，這里要上圖啦~~~

  

二、vue生命周期的在項目中的執行順序

export default {
  data () {
    return {
      rendered: false
    }
  }
}

 

export default {
  beforeCeate(){
    console.log(this.rendered);  // undefined 
  }
}

export default {
  created() {
    console.log(this.$el);//undefined
    console.log(this.rendered);  // false
  }
}

 

export default {
  beforeMount() {
    console.log(this.$el)；//undefined
  }
}

 

export default {
  mounted() {
    console.log(this.$el);  
  }
}

 

export default {
  beforeDestroty(){
    console.log(this.$el);
    console.log(this.rendered); 
  }
}

 

export default {
  destroyed() {
    console.log(this.$el);
    console.log(this.rendered);
  }
}

 

三、vue中內置的方法 屬性和vue生命周期的運行順序（methods、computed、data、watch、props)

從第一二點可知道data的初始化是在created時已經完成數據觀測data observer，並且諸如methods、computed屬性props等已經初始化；那問題來了，data props computed watch methods他們之間的生成順序是什么呢？ 根據翻看vue源碼可知：

 

props -> methods -> data ->  computed ->  watch; 懂了沒

 

四、自己構造的方法與vue生命周期的運行順序 如show這些

往往我們在開發項目時都經常用到$refs 來直接訪問子組件的方法，但是這樣調用的時候可能會導致數據的延遲滯后的問題，則會出現bug。 解決方法則是推薦采取異步回調的方法，然后傳參進去，嚴格遵守vue的生命周期就可以解決 推薦 es6 的promise。 示例代碼：

export default {
  methods: {
      handleAsync () {
          return new Promise(resolve=>{
              const res="somedata";
              resolve(res)
          })
       },
       async handleShow() {
              await this.handleAsync().then(res=>{
              this.$refs.child.show(res);
           })
        }
   }
}

 

五、總結

vue 的生命周期，總得來說就是實例的創建和銷毀這段時間的一個機制吧。也是vue框架的數據間的交互通信。其實現在看來也沒那么難，但是vue的源碼實現這一套機制那是難得一逼，涉及到復雜的算法如diff算法，有興趣的童鞋可以去深入了解一下。