VueJS----[全局API-2.4]----Vue的生命周期（钩子函数）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010996565/article/details/82056648

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

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段进行操作数据或者改变内容

下面看一段代码

<div id="app">
        {{message}}
        <p><button @click="add">add</button></p>
    </div>  
    <button onclick="app.$destroy()">destroy</button>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:1
            },
            methods:{
                add:function(){
                    this.message++;
                }
            },
            beforeCreate:function(){
                console.log('初始化之后');
            },
            created:function(){
                console.log('创建完成');
            },
            beforeMount:function(){
                console.log('挂载之前');
            },
            mounted:function(){
                console.log('挂载后');
            },
            beforeUpdate:function(){
                console.log('数据更新前');
            },
            updated:function(){
                console.log('数据更新后');
            },
            activated:function(){
                console.log('7-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('销毁之前');
            },
            destroyed:function(){
                console.log('销毁之后');
            }
        });
    </script>