接下來的東西越來越複雜了，不知道要怎麼打才會讓人比較好理解，希望大家可以給我點建議ಥ-ಥ，有錯還請嚴厲指正我(前提是有人在看我的文章?)。

必須存在的前言

每個Vue instance都要經過一系列的初始化過程，像是需要設置數據監聽、編譯模板、將instance掛載到DOM並在數據變化時更新DOM等等，同時在這些過程中也會運行一些叫做lifecycle hooks(生命週期鉤子)的函數，為使用者創造了在不同階段增加自己代碼的機會。

lifehook簡介

先看幾個lifehook來做簡介~

• beforCreate---在instance初始化之後，data observer和event/watcher配置之前被調用。
• created---在instance被創建完成後立即被調用。在這一步instance已經完成以下配置，data observer、property和方法配置、watch/event callbacks(回調)，但是mounting(安裝)階段還沒開始，$el property還不行使用。
• beforMount---顧名思義就是在mounting之前被調用，相關的render function第一次被調用。
• mounted---inatance被mounted後調用，el被新創建的vm.$el替換，mounting成功。
• beforUpdate---數據更新之前調用。
• updated---組件DOM已經更新，組件更新完畢時調用。

小應用

來個小小的實際應用來觀察這些lifecycle hooks
lifecycle hooks需要以屬性的方式寫在Vue instance裡面。
還有一點要特別注意，生命週期函數不能使用arrow function(箭頭函數)，因為箭頭函數沒有this，lifehooks的this上下文指向調用它的Vue instance。


先看一下控制台運行的順序

發現依序是beforeCreat、created、beforeMount、mounted，最後因為有加上3秒後更改變量，所以控制台裡也會出現beforeUpdate、updated這樣的lifecycle。

在Vue.js的官網上也有其他lifecycle的簡介，大家可以去看看。點這裡
在最後附上一張生命週期的圖示，下圖演示了instance的生命週期，看不太懂也沒關係，因為我也看不懂，隨著對Vue的了解，回過頭來看這張圖，它的參考價值也會變得比較高!!