前言

《vue 基礎》系列是再次回爐 vue 記的筆記，除了官網那部分知識點外，還會加入自己的一些理解。(里面會有部分和官網相同的文案，有經驗的同學擇感興趣的閱讀)

平時開發(fā)中，我真的不太使用生命周期相關的方法。但必須明確的是，生命周期在整個 vue 具有非常重要的作用，如果你了解它將對理解整個 vue 會更容易；同時在遇到問題時也能有個導向性的判斷。

此篇簡單說下生命周期的過程，以及方法調用。

生命周期的整個過程

借用 vue 官網的圖，仔細全覽下基本就對生命周期的過程有個粗略的認識了。

我這里沒必要重復細說了，按我自己理解講這個過程：

new 一個 Vue 實例

初始化 event($on、$off 等) 和 lifecycle

觸發(fā)鉤子 beforeCreate

初始化 inject、data、computed、watch、provide

觸發(fā)鉤子 created

判斷 el 屬性(是否調用 $mount，你在源碼能看到兩個 $mount 的聲明)，判斷 template 屬性(決定渲染模板)

觸發(fā)鉤子 beforeMount

替換 el 標簽內容，實現元素掛載

觸發(fā)鉤子 mounted

definedReactive 響應式的定義在初始化的時候已經完畢了，當數據更新，觸發(fā)鉤子 beforeUpdate 、 updated

銷毀時，觸發(fā)鉤子 beforeDestroy

移除事件監(jiān)聽、綁定數據

銷毀完， 觸發(fā)鉤子 destroyd

鉤子觸發(fā)順序

這個例子，調用了所有生命周期的鉤子，用來說明他們的執(zhí)行順序(注意 activated 和 deactivated 是 keepalive 專用的)：

直接看下圖，當 created 時，開啟一個 timer 定時器用來確認組件的銷毀情況。

有什么細節(jié)問題

beforeCreate 和數據響應式

因為 beforeCreate 是最開始初始化的，數據響應和相關事件和監(jiān)聽在其后，所以有類似功能處理需要避免。

created 獲取不到 dom 元素

它是指完成了數據觀察、相關屬性方法的計算，并沒有把我們的模板替換到 html 上，不要試圖在這個鉤子里調用 dom 相關的 api。

如果你想獲取整個客戶端的高度的話，建議放在 mounted 中。

不要忘記移除掉定時器等

beforeDestroy 不是沒有用，在這環(huán)節(jié)中，vue 的實例仍然有效，你可以移除定義的 timer ，以免引起不必要的錯誤。

總結

生命周期貫穿整個 vue 的設計思想，理解好它能寫出讓別人能更容易“看得懂的”代碼，千萬不能張冠李戴的亂用。

另外上面那張 vue 整個生命周期的圖 ，正如官網所說，隨著我們使用的深入，它的意義會越來越大。

關于我

一位“前端工程師”，樂于實踐，并分享前端開發(fā)經驗。

如果有問題或者想法，歡迎各位評論留言，愿大家共同進步。

關注【前端雨爸】，查閱更多前端技術心得。

總結

以上是生活随笔為你收集整理的vue created 调用方法_vue 基础-生命周期 lifecycle 的执行顺序和作用的全部內容，希望文章能夠幫你解決所遇到的問題。

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