生命周期和钩子函数

每一个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);    }