在 Vue2 當中，從將組件給 Vue 託管開始，會經歷幾個階段，而 Vue 提供已經定義好的鉤子函式(Hook Event)來讓開發者可以在不同階段做出相對應的處理

• beforeCreate: 在 Vue 被宣告時開始的階段，此時任何 Vue 的設定都還未設定
• created: Vue 的設定除了 el 以外都已設定，而 el 將會在掛載樣板後才掛上去
• brforeMount: 此時 Vue 正準備將樣板掛載到 el 上
• mounted: 此時 Vue 實體已掛載到樣板上，若資料都沒有更改那將會停留在這個階段
• beforeDestory: 在 Vue 的組件即將銷毀時，將會觸發此狀態，可以將一些像是事件偵測器的屬性給拔掉
• destroyed: 此時 Vue 組件已經銷毀，任何此組件的屬性將無法呼叫

而在 mounted 後若有觸發更新則會有這兩個鉤子函式將會被觸發

• beforeUpdate: 當 Vue 內的資料進行更動但還未更新樣板時，將會觸發此函式
• updated: 此時 Vue 樣板已經更新完畢

因此讓我們從一個 Vue 的實體準備掛載後開始說明吧

<div id="app">
    <div> 已經點擊了 {{count}} 次</div>
    <button @click="count += 1">Click me</button>
</div>
<!-- Vue CDN -->
<script>
let vm = new Vue({
    el: '#app',
    data(){
        return {
            count: 0
        }
    },
    beforeCreate(){
    },
    created(){
    },
    beforeMount(){
    },
    mounted(){
    },
    beforeUpdate(){
    },
    updated(){
    },
    beforeDestroy(){
    },
    destroyed(){
    }
})
</script>

• beforeCreate: 此時 vm 還未將 Vue 得屬性掛上去，可以說跟一個空物件一樣
• created: 此時 Vue 的屬性已經掛上去了，除了 el 以外都可以呼叫到
• brforeMount: 此時 Vue 已經將樣板掛上 Vue 了，只是還未將 DOM 更改成 Vue 的形狀
• mounted: 此時 Vue 已經成功渲染，若畫面數值未更新將會保留此狀態
• beforeUpdate: 當上面的按鈕觸發後 count 將會先進行 += 1 的賦值，並且呼叫此鉤子
• updated: 此時已將 count 的值更新上樣板上
• beforeDestory: 當此元件即將銷毀時，會觸發此鉤子，此時還是呼叫的到 count
• destroyed: 此時已經無法呼叫 vm 的屬性，Vue 已經銷毀

生命週期可以說是影響整個 Vue 的一大內容，這邊還是建議各位實際跑過一次會比較了解呦，今天的內容就到此結束啦