Vue生命週期詳解

在看這篇文章以前，能夠先看看vue:https://cn.vuejs.org/v2/guide/instance.html#生命週期圖示

官網主要介紹了beforeCreate、created、beforeMount、mounted、beforeUpdate、update、befpreDestroy、destroyed八個階段（其實還有active等階段）。

下面咱們經過一個組件的執行輸出來搞清楚每一個階段發生了什麼。

<template>
<div id="wer">
    <h1 @click="updateData">{{message}}</h1>
    <h2>{{helloCom}}</h2>
</div>
</template>
<script>
export default {
    data() {
      return{
          message: 'Vue的生命週期',
      }
    },
    computed: {
        helloCom(){
            return this.message + ' computed;';
        },
    },
    methods:{
        updateData(){
            this.message = "update message";
        }
    },
    beforeCreate: function() {
      console.group('------beforeCreate建立前狀態------');
      console.log( "el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //undefined 
      console.log("message: " + this.message); //undefined 
      console.log("computed: " + this.helloCom); //undefined 
    },
    created: function() {
      console.group('------created建立完畢狀態------');
      console.log("el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //[object Object]
      console.log("message: " + this.message); //Vue的生命週期
      console.log("computed: " + this.helloCom); // Vue的生命週期 computed
    },
    beforeMount: function() {
      console.group('------beforeMount掛載前狀態------');
      console.log("el     : " + (this.$el)); //undefined
      console.log("data   : " + this.$data); //[object Object]
      console.log("message: " + this.message); //Vue的生命週期
      console.log("computed: " + this.helloCom); // Vue的生命週期 computed
    },
    mounted: function() {
      console.group('------mounted 掛載結束狀態------');
      console.log("el     : " + this.$el); //[object HTMLDivElement] 
      console.log(this.$el); 
      console.log("data   : " + this.$data); //[object Object]
      console.log("message: " + this.message); //Vue的生命週期
      console.log("computed: " + this.helloCom); // Vue的生命週期 computed
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前狀態===============》');
      console.log("el     : " + this.$el);// [object HTMLDivElement] 
      console.log(this.$el);   
      console.log("data   : " + this.$data); //[object Object]
      console.log("message: " + this.message); // Vue的生命週期
      console.log("computed: " + this.helloCom);// Vue的生命週期 computed
    },
    updated: function () {
      console.group('updated 更新完成狀態===============》');
      console.log("el     : " + this.$el);// [object HTMLDivElement] 
      console.log(this.$el); 
      console.log("data   : " + this.$data); //[object Object]
      console.log("message: " + this.message); // Vue的生命週期
      console.log("computed: " + this.helloCom);// Vue的生命週期 computed
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 銷燬前狀態===============》');
      console.log("el     : " + this.$el);
      console.log(this.$el);    
      console.log("data   : " + this.$data); 
      console.log("message: " + this.message); 
      console.log("computed: " + this.helloCom);
    },
    destroyed: function () {
      console.group('destroyed 銷燬完成狀態===============》');
      console.log("el     : " + this.$el);
      console.log(this.$el);  
      console.log("data   : " + this.$data); 
      console.log("message: " + this.message)
      console.log("computed: " + this.helloCom);
    }
}
</script>
<style lang="stylus" scoped>

</style>

執行完以後，結果以下：

下面咱們來一一分析一下：

beforeCreate建立前狀態：

如圖所示，在該階段，肉眼可見的變化不多，主要是初始化一些時間。

created建立完畢狀態：

如圖所示，在該階段，除了掛載點以外，其餘元素都已準備就緒。

beforeMount掛載前狀態：

如圖所示，在該階段，準備掛載點，可是掛載元素依然不存在。

mounted 掛載結束狀態：

此時全部指令生效，數據變化已經能觸發DOM更新，但不能保證$el已經插入文檔。

beforeUpdate 更新前狀態：

觸發了頁面的event時間後，也就觸發了update階段，此時DOM還沒有更新。

updated 更新完成狀態：

 

更新DOM結構示例。

beforeDestroy 銷燬前狀態：

 在開始銷燬實例時調用，此刻實例仍然有效。

destroyed 銷燬完成狀態：

 實例被銷燬以後調用，此刻全部綁定和實例指令都已經解綁，子實例也被銷燬。

 activated

須要配合動態組件keep-live使用，在動態組件初始化渲染的過程當中調用該方法。

deactivated

須要配合動態組件keep-live使用，在動態組件移除的過程當中調用該方法。