生命周期和钩子函数

每一个vue实例在创建之前都需要一系列的初始化过程，如实例需要数据观测（data observer），编译模板，挂载实例到DOM上，以及数据更新和DOM渲染。
create（创建）： beforeCreate 创建前 ； created 创建结束
mount（挂载）： beforeMount ；mounted
update(更新)： beforeUpdate；Updated
destory（销毁）： beforeDestory；destoryed
钩子函数：
在实例的生命周期中会自动执行一些函数，这些函数 就叫做钩子函数
钩子函数为我们提供了，自定义一些逻辑的机会
语法和测试：

beforeCreate: function(){
        //el vue实例使用的根dom元素，是只读的
        // $data vue观察的数据对象，实例代理了其对$data的对象属性的访问
        console.group("创建前beforeCreate-------------------------");
        console.log("el:------"+this.$el);     // el:------undefined
        console.log("data:------"+this.$data);  //  data:------undefined
        console.log("msg:------"+this.msg);  //  msg:------undefined
    },
    created: function(){
        console.group("创建完成created-------------------------");
        console.log("el:------"+this.$el);  //el:------undefined
        console.log("data:------"+this.$data); // data:------[object Object]       
        console.log("msg:------"+this.msg);  // msg:------hello vue
    },  
    beforeMount: function(){
        console.group("挂载前beforeMount-------------------------");
        console.log("el:------"+this.$el); // 虚拟出一个div元素来进行占位
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    },
    mounted: function(){
        console.group("挂载后mounted-------------------------");
        console.log("el:------"+this.$el);
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    },
    beforeUpdate: function(){  // 在console 浏览器控制台进行测试
        console.group("数据更新前beforeUpdate-------------------------");
        console.log("el:------"+this.$el);
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    },
    updated: function(){
        console.group("数据更新后Update-------------------------");
        console.log("el:------"+this.$el);
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    },
    beforeDestory: function(){  // $destory  完全销毁一个实例。解绑它的全部指令和事件监听器。清理和其他实例的链接
        console.group("销毁前beforeDestory-------------------------");
        console.log("el:------"+this.$el);
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    },
    destoryed: function(){
        console.group("销毁后到destoryed-------------------------");
        console.log("el:------"+this.$el);
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    }