正规捕鱼网站官方网址

書名： Vue.js從入門到項目實踐（超值版）
作者名：聚慕課教育研發中心編著
本章字數： 1349字
更新時間： 2022-07-29 14:27:32

2.4　實例的生命周期

本節將介紹Vue實例從創建、運行到銷毀的整個過程。在Vue實例的創建、運行、銷毀期間，總是伴隨著各種各樣的事件，這些事件統稱為“生命周期”。下面通過案例對生命周期進行詳解。

Vue實例的生命周期代碼如下：

1．beforeCreate()

beforeCreate()在實例初始化后，數據觀測（data observer）和event/watcher事件配置前被調用。

提示：這個時候this還不能使用，data中的數據、methods中的方法，以及watcher中的事件都不能獲得，值為undefined。

代碼如下：

運行的結果如圖2-14所示。

圖2-14　beforeCreate()運行結果

2．created()

created()在實例已經創建完成后被調用。在這一步，實例已完成以下配置：數據觀測（data observer）、屬性和方法的運算及watch/event事件回調。掛載階段還沒開始的$el屬性為不可見，值為undefined。

提示：這個時候可以操作Vue中的數據和方法，但是還不能對DOM節點進行操作。

    created(){
       console.group('created 創建完畢狀態');
       console.log("%c%s", "color:red", "el      : "+this.$el);         //undefined
       console.log("%c%s", "color:red", "data    : "+this.$data);       //[object Object]
       console.log("%c%s", "color:red", "message : "+this.message);     //值為Hello World!!!
    },

運行的結果圖如圖2-15所示。

圖2-15　created()運行結果

3．beforeMount()

beforeMount()在掛載開始前被調用，相關的render函數首次被調用。

提示：這個時候，$el屬性已存在，是虛擬DOM，只是數據未掛載到模板中。

    beforeMount(){
      console.group('beforeMount 掛載前狀態');
      console.log("%c%s", "color:red", "el      : "+this.$el);      //[object HTMLDivElement]
      console.log(this.$el);
      console.log("%c%s", "color:red", "data    : "+this.$data);    //[object Object]
      console.log("%c%s", "color:red", "message : "+this.message);  //值為Hello World!!!
    },

運行的結果如圖2-16所示。

圖2-16　beforeMount()運行結果

4．mounted()

el被新創建的vm.$el替換，并掛載到實例上后調用該鉤子函數。如果root實例掛載了一個文檔內元素，當mounted()被調用時vm.$el也在文檔內。mounted()不會承諾所有的子組件都一起被掛載。如果想要整個視圖都渲染完畢，可以使用vm.$nextTick替換mounted()。

提示：掛載完畢，這時DOM節點被渲染到文檔內，DOM操作在此時能正常進行。

    mounted(){
       console.group('mounted 掛載結束狀態');
       console.log("%c%s", "color:red", "el     : "+this.$el);      //[object HTMLDivElement]
       console.log(this.$el);
       console.log("%c%s", "color:red", "data   : "+this.$data);    //[object Object]
      console.log("%c%s", "color:red", "message : "+this.message);  //值為Hello World!!!
    },

運行的結果如圖2-17所示。

圖2-17　mounted()運行結果

5．beforeUpdate()

beforeUpdate()在數據更新時被調用，發生在虛擬DOM打補丁前。這里適合在更新前訪問現有的DOM，例如手動移除已添加的事件監聽器。

提示：beforeUpdate()是指View層的數據變化前，而不是data中的數據改變前被觸發。因為Vue是由數據驅動的。

    beforeUpdate(){
      console.group('beforeUpdate 更新前狀態');
      console.log("%c%s", "color:red", "el      : "+this.$el);      //[object HTMLDivElement]
      console.log(this.$el);
      console.log(this.$el.innerHTML);
      console.log("%c%s", "color:red", "data    : "+this.$data);    //[object Object]
      console.log("%c%s", "color:red", "message : "+this.message);  //值為Hello Vue!!!
    },

運行的結果如圖2-18所示。

圖2-18　beforeUpdate()運行后修改message值為Hello Vue!!!

6．updated()

由于數據的更改導致虛擬DOM重新渲染和打補丁，在這以后會調用該鉤子函數。當該鉤子函數被調用時，組件DOM已經更新，所以可以執行依賴于DOM的操作。然而，在大多數情況下，應該避免在此期間更改狀態。如果要改變相應狀態，最好使用計算屬性或watcher取而代之。updated()不會承諾所有的子組件都一起被重繪。如果希望等到整個視圖都重繪完畢，可以用vm.$nextTick替換掉updated()。

提示：View層的數據更新后，data中的數據同beforeUpdate()，都是更新完以后的。

    updated(){
       console.group('updated 更新完成狀態');
       console.log("%c%s", "color:red", "el      : "+this.$el);      //[object HTMLDivElement]
       console.log(this.$el);
       console.log(this.$el.innerHTML);
       console.log("%c%s", "color:red", "data    : "+this.$data);    //[object Object]
       console.log("%c%s", "color:red", "message : "+this.message);  //值為Hello Vue!!!
    },

運行的結果如圖2-19所示。

圖2-19　updated()運行結果

提示：從上面可以看到，beforeUpdate()和updated()鉤子函數中的$el一樣，因為beforeUpdate()應該指向虛擬DOM，所以$el才會相同，而DOM中的真正內容是不一樣的。

7．beforeDestroy()

beforeDestroy()在實例銷毀前被調用。在這一步，實例仍然完全可用。

提示：執行vm.$destroy()觸發beforeDestroy()和destoryed()鉤子函數。

    beforeDestroy(){
       console.group('beforeDestroy 銷毀前狀態');
       console.log("%c%s", "color:red", "el      : "+this.$el);       //[object HTMLDivElement]
       console.log(this.$el);
       console.log("%c%s", "color:red", "data    : "+this.$data);     //[object Object]
       console.log("%c%s", "color:red", "message : "+this.message);   //值為Hello Vue!!!
    },

8．destroyed()

destroyed()在Vue實例銷毀后被調用。調用后，Vue實例指向的所有部分都會被解綁定、所有的事件監聽器會被移除、所有的子實例也會被銷毀。

提示：執行destroyed ()后，對data的改變不會再觸發生命周期函數，此時的Vue實例已經解除了事件監聽及與DOM的綁定，但是DOM結構依然存在。

    destroyed(){
      console.group('destroyed 銷毀完成狀態');
      console.log("%c%s", "color:red", "el      : "+this.$el);      //[object HTMLDivElement]
      console.log(this.$el);
      console.log("%c%s", "color:red", "data    : "+this.$data);    //[object Object]
      console.log("%c%s", "color:red", "message : "+this.message);  //值為Hello Vue!!!
    },

官术网_书友最值得收藏!

Vue.js從入門到項目實踐（超值版）

2.4 實例的生命周期