Vue 進階之路（十四）

豐寸發表於2019-05-08
Vue

之前的文章我們對 vue 的基礎用法已經有了很直觀的認識，本章我們來看一下 vue 中的生命週期函式。

上圖為 Vue官方為我們提供的完整的生命週期函式的流程圖，下面的案例我們只是走了部分情況流程，但所有的生命週期函式都涉及到了。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     <child v-if="show"></child>
11     <button @click="handleClick">{{title}}</button>
12 </div>
13 <script>
14     Vue.component("child", {
15         beforeDestroy() {
16             console.log("beforeDestroy", this.$el);
17         },
18         destroyed() {
19             console.log("destroyed", this.$el);
20         },
21         template: `<p>我是 child 子元件</p>`,
22     });
23     var app = new Vue({
24         el: '#app',
25         data: {
26             title: "hello world",
27             show: true
28         },
29         beforeCreate() {
30             console.log("beforeCreate", this.$el);
31         },
32         created() {
33             console.log("created", this.$el);
34         },
35         beforeMount() {
36             console.log("beforeMounted", this.$el);
37         },
38         mounted() {
39             console.log("mounted", this.$el);
40         },
41         beforeUpdate() {
42             console.log("beforeUpdate", this.$el);
43         },
44         updated() {
45             console.log("updated", this.$el);
46         },
47         methods: {
48             handleClick() {
49                 this.show = !this.show;
50             }
51         }
52     })
53 </script>
54 </body>
55 </html>

從上面的程式碼中我們可以看出 vue 的生命週期函式有：

beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed

這幾個生命週期函式的意思分別是：

　　beforeCreate：元件建立前，

　　created：元件建立完成，

　　beforeMount：元件掛載前，

　　mounted：元件掛載完成，

　　beforeUpdate：元件更新前，

　　updated：元件更新完成，

　　beforeDestroy：元件銷燬前，

　　destroyed：元件成功銷燬。

 

我們通過頁面顯示和控制檯的輸出日誌來看一下：

當頁面載入時會觸發 beforeCreate，created，beforeMount，mounted 四個生命週期函式。當執行到 mounted 生命週期函式時，資料才真正掛在到 DOM 上，所以我們從後臺獲取到的資料可以放在 mounted 生命週期函式中，然後再掛在到 DOM 上。

當我們更改資料時會觸發哪些生命週期函式呢，結果如下：

當我們改變資料中的 title 值時，觸發了 beforeUpdate 和 updated 生命週期函式。

為了演示 beforeDestroy 和 destroyed 生命週期函式，我們定義了一個子元件，並通過 handleClick() 方法來控制該子元件的掛載和銷燬，當我們點選按鈕使元件銷燬時：

因為我們將 beforeUpdate 和 updated 生命週期函式定義在了父元件上，所以當子元件銷燬時也屬於父元件更新的一種，所以會觸發這兩個函式。還觸發了 beforeDestroy 和 destroyed 生命週期函式，這兩個是在元件銷燬時才觸發的生命週期函式。

 

相關文章