Vue生命週期詳解

前面Vue入門基礎（二)的時候裡面有說過Vue的生命週期，說的比較淺。本篇文章會詳細的講解Vue的生命週期

生命週期&生命週期函式

生命週期（Life Cycle）是指一個元件從建立 -> 執行 -> 銷燬的整個階段，強調的是一個時間段。

生命週期函式：是由 vue 框架提供的內建函式，會伴隨著元件的生命週期，自動按次序執行。

注意：生命週期強調的是時間段，生命週期函式強調的是時間點。

1.1 元件生命週期函式的分類

1.2 生命週期圖示

1.3 建立階段

1. beforeCreate生命週期函式

本案例演示是在基於App.vue中匯入子元件 test.vue演示的

app.vue

<div>
    //繫結子元件傳過來的info
    <Test info="123456"></Test>
</div>
<script>

import Test from '@/components/Test.vue'
export default {

// 註冊元件

components:{

Test

}

}

</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

test.vue

export default {
//傳遞一個引數
    props:['info'],
     data(){
        return{
            message:'hello vue.js',
        }
    },
    methods:{
<span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'呼叫了Test 元件的show方法'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token comment">//定義第一個生命週期函式beforeCreate</span>
<span class="token comment">//建立階段的第一個生命週期</span>
<span class="token function">beforeCreate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token comment">//列印info (123456)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//列印 hello vue.js</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//呼叫 show</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
 

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

可以看到我們這裡報錯了

總結：這個階段什麼都用不了，都處於不可用狀態

2. created生命週期函式 (重要)

參考上面的程式碼
在跟beforeCreate同級下 建立一個created函式
 created() {
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 經常在它裡面 呼叫methods 中的方法 請求伺服器的資料</span>
<span class="token comment">// 並且 吧請求的資料轉存到  data 中 為template 模板渲染的時候使用</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

可以看到我們這裡就沒有報錯了，並且也打印出來了想要的結果

總結：created 在生命週期函式中非常常用，此階段是獲取到了資料，還沒有進行頁面的渲染結構，常用於呼叫methods中Ajax請求以及後臺的請求上

3. beforeMount生命週期函式

test.vue元件

<div id="myh3"><div>

• 1

還是在同級下 在建立beforeMount函式
  將要把記憶體中編譯好的HTML 結構渲染到瀏覽器中
但是！！！還沒有渲染
beforeMount() {
    //這個可以渲染出來 但是操作Dom元素 當前獲取到的是unll
            console.log('beforemount');
    <span class="token keyword">const</span> dm <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#myh3'</span><span class="token punctuation">)</span>
       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dm<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
        
<span class="token punctuation">}</span><span class="token punctuation">,</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

總結：此生命週期函式下，也可以進行Ajax請求，但是，Ajax請求最早的是可以在created裡面傳送請求 所以越早請求越早拿到資料。當前階段還沒有將編譯好的HTML結構 渲染到瀏覽器中，所以是無法操作Dom。作用不大，沒有什麼意義！！！

4. mounted生命週期函式（重要）

 // 已經吧記憶體的HTML 渲染到頁面
    //如果要操作當前元件的DOM  最早只能在mounted的執行
    mounted() {
         console.log(this.$el);  
         const dm = document.querySelector('#myp')
         console.log(dm);
    },

• 1
• 2
• 3
• 4
• 5
• 6
• 7

總結：已經吧記憶體的HTML 渲染到頁面，如果要操作當前元件的DOM 最早只能在mounted的執行

1.4 執行階段（最少執行0次，最多無限次）

1.beforeUpdate生命週期函式

頁面上放一個結構

 <p id="myp"> message 的值是：{{message}}</p>
 <button @click="message +='~'">修改message的值</button>

• 1
• 2

//將要根據變化過後 最新的資料 重新渲染元件的模板結構 
    beforeUpdate() {
        console.log('1')
        console.log(this.message);
        const dm = document.querySelector('#myp')
        console.log(dm.innerHTML);
    },

• 1
• 2
• 3
• 4
• 5
• 6
• 7

可以看到我們在這裡修改之後列印的message 後面加上了~ 但是innerHTML打印出來的並沒有，data裡面的資料是最新的，但是頁面的UI結構還是舊的，這個階段頁面還沒有來得及渲染

2.updated什麼周期函式（重要）

我們放一個跟上一個階段一樣的程式碼，來看看會是什麼樣的

// 當資料變化後  為了能夠操作到最新的Dom結構 必須吧程式碼寫到updated什麼生命週期的裡面
    updated() {
        console.log('1')
        console.log(this.message);
        const dm = document.querySelector('#myp')
        console.log(dm.innerHTML);
    },

• 1
• 2
• 3
• 4
• 5
• 6
• 7

當我們點選按鈕後，data和頁面的UI結構都已經同步了

1.5 銷燬階段

1.beforeDestroy生命週期函式

演示銷燬
在 app.vue裡面定義

 <button @click="flag=!flag">Toggle Flag</button>
     <Test info="你好" v-if="flag"></Test>
<script>
export default {
data(){
return {

flag:true,
}
},
}
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

test.vue

 //執行銷燬階段
    beforeDestroy() {
         console.log('destroy')
        console.log(this.message)
    },

• 1
• 2
• 3
• 4
• 5

可以看到當這個元件消失後 打印出了destroy 和 this.message的值

總結：將要銷燬此元件，此時尚未銷燬，元件還處於正常工作的狀態

2 destroyed生命週期函式

到當前函式的時候，此元件在瀏覽器中對應的Dom結構已經完全移除了

總結

1、建立階段執行1次，執行階段最少0次最多N次，銷燬階段最多執行1

2、比較重要階段是created/mounted/updated