vue---生命週期

這裏所說的vue的生命週期指的就是vue組件的生命週期，組件從建立到銷燬的過程表明一個完整的生命週期。

在vue組件中，組件的實例從建立前(beforeCreate)、建立後(created)、掛載前(beforeMount)、掛載後(mounted)、更新前(beforeUptate)、更新後(updated)、銷燬前(beforeDestroy)、銷燬後(destroyed)一系列，即從建立到銷燬的整個過程，咱們把它稱之爲vue組件的一個完整的生命週期。

咱們通常把vue的生命週期分爲三個階段：初始化、運行中、銷燬。

這是官網vue組件的生命週期圖 

(1) beforeCreate:

beforeCreate() { 
  console.log('beforeCreate--$el:', this.$el); 
  console.log('beforeCreate--$data:', this.$data);
  console.log('beforeCreate--res:', this.res); 
}

從打印的結果來看咱們知道：

beforeCreate --- 在vue實例徹底被建立出來以前(意思就是說vue實例尚未被徹底建立出來)被調用，此時數據尚未被初始化，因此沒法訪問數據，

 (2) created:

created() {
  console.log('created--$el:', this.$el); 
  console.log('created--$data:', this.$data); 
  console.log('created--res:', this.res); 
}

 

從打印的結果來看咱們知道：

created --- 在vue實例建立完成後被調用，這個過程已完成了數據的初始化，能夠被訪問獲得，也能得到methods方法；這個過程能夠修改數據，這也是渲染以前修改數據的機會。

(3) beforeMount:

beforeMount() {
  console.log('beforeMount--$el:', this.$el);
  console.log('beforeMount--$data:', this.$data);
  console.log('beforeMount--res:', this.res);
},

beforeMount --- 這個過程是在模版已經在內存中編譯完成，掛載以前被調用，render函數也是首次被調用，此時完成了虛擬Dom的構建，但並未被渲染，這也是最後一次修改數據的機會。

(4) mounted:

mounted() {
  console.log('mounted--$el:', this.$el);
  console.log('mounted--$data:', this.$data);
  console.log('mounted--res:', this.res);
},

mounted --- 這個過程在模版掛載以後被調用，完成渲染，因此咱們能夠操做Dom。

(5) beforeUpdate:

這個鉤子函數是在從新渲染以前(更新前)調用，這個過程是不能更改數據的；若是在調用這個鉤子函數以前數據沒有改變的話，是無任何變化的；當數據發生改變以後，此時實例中的數據是最新的，而頁面中的數據仍是以前舊的，二者並無達到同步；這個過程會再次調用render函數，它會從新構建虛擬Dom，而後與上次生成的虛擬Dom樹利用diff算法進行對比找出差別，爲下次的從新渲染作準備。

(6) updated:

這個過程在從新渲染以後（更新後調用）被調用，已渲染完成，頁面更新，此時實例中的數據與頁面中的數據是同步的。

(7) beforeDestroy:

這個過程是vue實例銷燬以前被調用，在這個過程當中咱們能夠作一些事情，好比 清除計時器或事件等等。

(8) destroyed:

vue實例銷燬後調用，而且vue實例中全部的東西都會解綁，全部的事件監聽器都會被移除，全部的子實例也會被銷燬。