Vue 生命周期钩子

 

    <script src="/js/vue.js"></script>

  

               <div id="content">
                   {{count}}
                   <button @click="add">ADD</button>
                   <button onclick="app.$destroy()">销毁</button>
               </div>

 

    var app = new Vue({
        el: '#content',
        data:{
            count:0
        },
        methods:{
            add:function(){
                this.count ++;
            }
        },
        beforeCreate:function(){
            console.log('1beforeCreate 初始化');
        },
        created:function(){
            console.log('2created 创建完成');
        },
        beforeMount:function(){
            console.log('3beforeMount 挂载之前');
        },
        mounted:function(){
            console.log('4mounted 被创建, 可以在此次请求后端数据初始化');
        },
        beforeUpdate:function(){
            console.log('5beforeUpdate 数据更新前');
        },
        updated:function(){
            console.log('6updated 被更新后');
        },
        beforeDestroy:function(){
            console.log('7beforeDestroy 销毁之前');
        },
        destroyed:function(){
            console.log('8destroyed 销毁之后')
        }
    })