vue入門筆記體系（二）vue生命週期

vue生命週期

這是vue生命週期的圖示具體內容：

全部的生命週期鉤子函數以下：

beforeCreate() {
    console.log(this, "beforeCreate");
    console.log('el:'+this.$el)
    console.log('data:'+this.$data)
    console.log('text:'+this.text)
  },
  created() {
    console.log(this, "created");
    console.log('el:'+this.$el)
    console.log('data:'+this.$data)
    console.log('text:'+this.text)
  },
  beforeMount() {
    console.log(this, "beforeMount");
    console.log('el:'+this.$el)
    console.log('data:'+this.$data)
    console.log('text:'+this.text)
  },
  mounted() {
    console.log(this, "beforeMount");
    console.log('el:'+this.$el)
    console.log('data:'+this.$data)
    console.log('text:'+this.text)
  },
  beforeUpdate() {
    console.log(this, "beforeUpdate");
  },
  updated() {
    console.log(this, "updated");
  },
  activated() {
    console.log(this, "activated");
  },
  deactivated() {
    console.log(this, "deactivated");
  },
  beforeDestroy() {
    console.log(this, "beforeDestroy");
  },
  destroyed() {
    console.log(this, "destroyed");
  },

打開控制檯能夠看出：

一個實例被建立後上面的這四個鉤子函數按順序執行，這四個函數在這個過程只會被調用一次；
beforeUpdate、updated是數據更新的先後執行的；
beforeDestroy、destroyed是組件銷燬後執行的；
activated、deactivated是組件使用<keep-alive></keep-alive>執行的，下面針對每一個過程進行詳解：

1.beforeCreate

beforeCreate前面是初始化一個vue實例，此時，Events初始化完成，但data還未完成，因此此時不要修改數據；

2.created

created時，數據已經和data屬性進行綁定，這是最先進行ajax數據請求的地方。此時還未有el選項；

3.created鉤子函數和beforeMount間的生命週期

created完成後，會有一個判斷過程，判斷對象是否有el選項。若是有的話就繼續向下編譯，若是沒有el選項，則中止編譯，也就意味着中止了生命週期，直到在該vue實例上調用vm.$mount(el)。
若是有el選項後，會再次判斷是否有templete選項：
若是有的話中有template參數選項，則將其做爲模板編譯成render函數。
若是沒有template選項，則將外部HTML做爲模板編譯。
能夠看到template中的模板優先級要高於outer HTML的優先級。

4.beforeMount和mounted 鉤子函數間的生命週期

此時已經掛載el選項，能夠操做dom,至此，vue實例前四個生命週期執行完成。

5.beforeUpdate鉤子函數和updated鉤子函數間的生命週期

當vue發現data中的數據發生了改變，會觸發對應組件的從新渲染，前後調用beforeUpdate和updated鉤子函數。

6.beforeDestroy和destroyed鉤子函數間的生命週期

beforeDestroy鉤子函數在實例銷燬以前調用。在這一步，實例仍然徹底可用。
destroyed鉤子函數在Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

另：activated：keep-alive組件激活時調用。該鉤子在服務器端渲染期間不被調用。

deactivated：keep-alive組件停用時調用。該鉤子在服務端渲染期間不被調用。