環境：Vue2.x版本

在Vue的官網有一張圖已經很好的詮釋了生命週期，我在這裡就不再多講了，直接貼圖，然後上程式程式碼。

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

<div id="app">
    {{count}}
    <p><button @click="add">加分</button></p>
</div>
<button onclick="app.$destroy()">銷燬</button
 
>

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            count:1
        },
        methods:{
            add:function(){
                this.count ++;
            }
        },
        beforeCreate:function(){
            console.log('1-beforeCreate 初始化之後'
 
);
        },
        created:function(){
            console.log('2-created 建立完成');
        },
        beforeMount:function(){
            console.log('3-beforeMount 掛載之前');
        },
        mounted:function(){
            console.log('4-mounted 被建立');
        },
        beforeUpdate:function(){
            console.log('5-beforeUpdate 資料更新前'
 
);
        },
        updated:function(){
            console.log('6-updated 被更新後');
        },
        activated:function(){
            console.log('7-activated');
        },
        deactivated:function(){
            console.log('8-deactivated');
        },
        beforeDestroy:function(){
            console.log('9-beforeDestroy 銷燬之前');
        },
        destroyed:function(){
            console.log('10-destroyed 銷燬之後')
        }
    })
</script>

activated
　　keep-alive元件啟用時呼叫。
　　該鉤子在伺服器端渲染期間不被呼叫。
deactivated
　　keep-alive元件停用時呼叫。
　　該鉤子在服務端渲染期間不被呼叫。