標註圖+部分舉例聊聊Vue生命週期

時間 2019-12-12

標籤標註部分舉例聊聊 vue 生命週期简体版

原文原文鏈接

「你不須要立馬弄明白全部的東西，不過隨着你的不斷學習和使用，它的參考價值會愈來愈高。」

如今項目中遇到了，好好回頭總結一波Vue生命週期，之後用到的時候再來翻翻。javascript

啥叫Vue生命週期？

每一個 Vue 實例在被建立時都要通過一系列的初始化過程。

例如：從開始建立、初始化數據、編譯模板、掛載Dom、數據變化時更新DOM、卸載等一系列過程。

咱們稱 這一系列的過程 就是Vue的生命週期。

通俗說就是Vue實例從建立到銷燬的過程，就是生命週期。

同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會，利用各個鉤子來完成咱們的業務代碼。html

啥也不說，先來個乾貨

這是對於Vue生命週期，官網給的那張圖的標註圖，圖片網上看到的，我以爲標註地很nice，建議一步步仔細看完圖片，而後把圖片本身悄悄保存下來，對照着圖片的內容看第二部分的舉例說明。vue

我相信程序員看代碼比看文字更容易理解

對照着上圖標註的內容，咱們一個鉤子一個鉤子地舉例說明。java

1.beforeCreate

實例初始化以後、建立實例以前的執行的鉤子事件。
以下例子：程序員

<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            test: '天王蓋地虎'
        },
        beforeCreate() {
            console.log('beforeCreate鉤子事件：');
            console.log($this.data);
            console.log($this.el);
        }
    })
</script>
</body>

獲得的結果是：ajax

小總結：建立實例以前，數據觀察和事件配置都沒好準備好。也就是數據也沒有、DOM也沒生成。服務器

2.created

實例建立完成後執行的鉤子
在上一段代碼例子中，咱們再來console一下。dom

<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            test: '天王蓋地虎'
        },
        created() {
            console.log('created鉤子事件：');
            console.log(this.$data);
            console.log(this.$el);
        }
    })
</script>
</body>

獲得的結果是：
函數

小總結：實例建立完成後，咱們能讀取到數據data的值，可是DOM還沒生成，掛載屬性el還不存在。學習

3.beforeMount

將編譯完成的html掛載到對應的虛擬DOM時觸發的鉤子
此時頁面並無內容。
即此階段解讀爲: 即將掛載
咱們打印下此時的$el

beforeMount() {
            console.log('beforeMount鉤子事件：');
            console.log(this.$el);
        }

獲得的結果是：

小總結：此時的el再也不是undefined,成功關聯到咱們指定的dom節點。可是此時的{{test}}尚未成功渲染成data中的數據，頁面沒有內容。

PS：相關的render函數首次被調用。

4.mounted

編譯好的html掛載到頁面完成後所執行的事件鉤子函數。

此時的階段解讀爲：掛載完畢階段

咱們再打印下此時$el看看：

mounted() {
            console.log('mounted鉤子事件：');
            console.log(this.$el);
        }

獲得的結果是：

可見， {{test}}已經成功渲染成data裏面test對應的值「天王蓋地虎」了。

小總結：此時編譯好的HTML已經掛載到了頁面上，頁面上已經渲染出了數據。通常會利用這個鉤子函數作一些ajax請求獲取數據進行數據初始化。
PS：mounted在整個實例中只執行一次。

5.beforeUpdate

小總結：當修改vue實例的data時，vue就會自動幫咱們更新渲染視圖，在這個過程當中，vue提供了beforeUpdate的鉤子給咱們，在檢測到咱們要修改數據的時候，更新渲染視圖以前就會觸發鉤子beforeUpdate。

6.updated

小總結：此階段爲更新渲染視圖以後，此時再讀取視圖上的內容，已是最新的內容。

PS:
一、該鉤子在服務器端渲染期間不被調用。
二、應該避免在此期間更改狀態，由於這可能會致使更新無限循環。

7.beforeDestroy

小總結：調用實例的destroy( )方法能夠銷燬當前的組件，在銷燬前，會觸發beforeDestroy鉤子。

8.destroyed

小總結：成功銷燬以後，會觸發destroyed鉤子，此時該實例與其餘實例的關聯已經被清除，Vue實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

話在最後

其實還有三個生命週期鉤子沒列出來：activated、deactivated、errorCaptured。這三個你們遇到了自行了解哈,暫且這樣吧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。