公眾號后臺收到不少同學催更新，馬上來。

上兩節我們都是講vue的實例，簡單創建和定義實例的4個常用選項，沒看過的伙伴可以先去看上兩節，按順序學習比較容易掌握。

這一節我們學習vue實例的生命周期，沒錯，實例也跟動物一樣，有自己的“生命”，實例也會經歷出生至死亡的各個階段。

Vue把整個生命周期劃分為創建、掛載、更新、銷毀等階段，每個階段都會給一些“鉤子”讓我們來做一些我們想實現的動作。學習實例的生命周期，能幫助我們理解vue實例的運作機制，更好地合理利用各個鉤子來完成我們的業務代碼。

我們分別來看看這幾個階段：

1. beforeCreate

此階段為實例初始化之后，此時的數據觀察和事件配置都沒好準備好。

我們試著console一下實例的數據data和掛載元素el，代碼如下:

? <div id="app">{{name}}</div>
? <script>
??? let app = new Vue({
? ? ? el:"#app",
??????? data:{
? ? ? ? ?name:"前端君"
? ? ??},
? ? ??beforeCreate(){
? ? ? ? ?console.log('即將創建');
? ? ? ? ?console.log(this.$data);
? ? ? ? ?console.log(this.$el);
? ? ? }
??? });
?</script>

得到的結果是：

此時的實例中的data和el還是undefined,不可用的。

2. created

beforeCreate之后緊接著的鉤子就是創建完畢created，我們同樣打印一下數據data和掛載元素el，看會得到什么？

在上一段代碼的基礎上，加上下面這段代碼：

created(){
??? console.log('創建完畢');
??? console.log(this.$data);
??? console.log(this.$el);
}

我們看到打印的結果：

此時，我們能讀取到數據data的值，但是DOM還沒生成，所以屬性el還不存在，輸出$data為一個Object對象，而$el的值為undefined。

3. beforeMount

上一個階段我們知道DOM還沒生成，屬性el還為undefined，那么，此階段為即將掛載，我們打印一下此時的$el是什么？

增加一下代碼：

beforeMount(){
??? console.log('即將掛載');
??? console.log(this.$el);
}

我們看到打印結果：

此時的$el不再是undefined，而是成功關聯到我們指定的dom節點<div id=”app”></div>，但此時{{ name }}還沒有被成功地渲染成我們data中的數據。沒事，我們接著往下看。

4. mounted

mounted也就是掛載完畢階段，到了這個階段，數據就會被成功渲染出來，我們編寫mounted的鉤子，打印$el?看看：

mounted(){
??? console.log('掛載完畢');
??? console.log(this.$el);
}

打印結果：

如我們所愿，此時打印屬性el，我們看到{{ name }}已經成功渲染成我們data.name的值：“前端君”。

5. beforeUpdate

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

html片段代碼我們加上ref屬性，用于獲取DOM元素（后期會講到）。

<div ref="app" id="app">
??? {{name}}
</div>

?Vue實例代碼加上beforeUpdate鉤子代碼：

beforeUpdate(){
? console.log('=即將更新渲染=');
? let name = this.$refs.app.innerHTML;
? console.log('name:'+name);
},

我們試一下，在控制臺修改一下實例的數據name，在更新渲染之前，我們打印視圖中文本innerHTML的內容會是多少：

（gif圖，加載需要點時間）

我們在控制臺把app.name的值從原來的 “前端君” 修改成 “web前端教程”,在更新視圖之前beforeUpdate打印視圖上的值，結果依然為原來的值：“前端君”，表明在此階段，視圖并未重新渲染更新。

6. updated

此階段為更新渲染視圖之后，此時再讀取視圖上的內容，已經是最新的內容，接著上面的案例，我們添加鉤子updated的代碼，如下：

updated(){
? console.log('==更新成功==');
? let name = this.$refs.app.innerHTML;
? console.log('name:'+name);
}

結果如下：

（gif圖，多看2遍，注意視圖變化）

大家注意兩個不同階段打印的name的值是不一樣，updated階段打印出來的name已經是最新的值：“web前端教程”，說明此刻視圖已經更新了。

7. beforeDestroy

調用實例的destroy( )方法可以銷毀當前的組件，在銷毀前，會觸發beforeDestroy鉤子。

8. destroyed

成功銷毀之后，會觸發destroyed鉤子，此時該實例與其他實例的關聯已經被清除，它與視圖之間也被解綁。

案例：我們通過在銷毀前通過控制臺修改實例的name，和銷毀之后再次修改，看看情況。

beforeDestroy(){
?? console.log('銷毀之前');
},
destroyed(){
?? console.log('銷毀成功');
}

效果如下圖：

（gif圖，多看2遍，注意視圖變化）

銷毀之前，修改name的值，可以成功修改視圖顯示的內容為：“更新視圖”，一旦效用實例的$destroy( )方法銷毀之后，實例與視圖的關系解綁，再修改name的值，已于事無補，視圖再也不會更新了，說明實例成功被銷毀了。

9. actived

keep-alive組件被激活的時候調用。

10. deactivated

keep-alive 組件停用時調用。

關于keep-alive組件的激活和停用，我們后面講到具體案例再介紹，在這里你只需要知道vue提供了keep-alive組件激活和停用的鉤子就可以了。

本節小結

掌握實例生命周期的8個階段：

（生命周期示例圖）

以后最為常用的鉤子是：created 成功創建。

擴展閱讀

?1.《ECMAScript 6 系列》原創教程

總結

以上是生活随笔為你收集整理的第五节：轻松掌握 vue 实例的生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。