【VueJS】Vue的生命周期（钩子函数）

环境：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组件停用时调用。
　　该钩子在服务端渲染期间不被调用。