Vue生命周期简介:
Vue1.0+和Vue2.0在生命周期钩子上的区别还是很大的,如下:
![](http://upload-images.jianshu.io/upload_images/5873060-cacd55da227c5711.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
代码验证:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:"Toney is a girl"
},
beforeCreate:function(){
console.group('beforeCreat 创建前的状态======》'); //控制台输出的语句产生不同的层级嵌套关系
console.log("%c%s","color:red","el : "+this.$el); //undefined, %c字符%s字符串
console.log("%c%s","color:red","data : "+this.$data"); //undefined
console.log("%c%s","color:red","message: "+this.message); //undefined
},
created:function(){
console.group("created 创建完毕状态======》");
console.log("%c%s","color:red","el : "+this.$el); //undefined
console.log("%c%s","color:red","data : "+this.$data"); //已被初始化
console.log("%c%s","color:red","message: "+this.message); //已被初始化
},
beforeMount:function(){
console.group("beforeMount 挂载前状态======》");
console.log("%c%s","color:red","el : "+this.$el); //已被初始化
console.log("%c%s","color:red","data : "+this.$data"); //已被初始化
console.log("%c%s","color:red","message: "+this.message); //已被初始化
},
mounted:function(){
console.group("mounted 挂载结束状态======》");
console.log("%c%s","color:red","el : "+this.$el); //已被初始化
console.log("%c%s","color:red","data : "+this.$data"); //已被初始化
console.log("%c%s","color:red","message: "+this.message); //已被初始化
},
beforeUpdate:function(){
console.log("beforeUpdate 更新前状态======》");
console.log("%c%s","color:red","el:"+this.$el);
console.log("%c%s","color:red","data:"+this.$data);
console.log("%c%s","color:red","message:"+this.$message);
},
updated:function(){
console.log("updated 更新完成状态======》");
console.log("%c%s","color:red","el:"+this.$el);
console.log("%c%s","color:red","data:"+this.$data);
console.log("%c%s","color:red","message:"+this.$message);
},
beforeDestory:function(){
console.log("beforeDestory 销毁前状态======》");
console.log("%c%s","color:red","el:"+this.$el);
console.log("%c%s","color:red","data:"+this.$data);
console.log("%c%s","color:red","message:"+this.$message);
},
destoryed:function(){
console.log("destoryed 销毁完成状态======》");
console.log("%c%s","color:red","el:"+this.$el);
console.log("%c%s","color:red","data:"+this.$data);
console.log("%c%s","color:red","message:"+this.$message);
}
})
</script>
</body>
![](http://upload-images.jianshu.io/upload_images/5873060-6d3906142f35167a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
关于更新
在chrome console中输入命令:
app.message="I am a girl"
![](http://upload-images.jianshu.io/upload_images/5873060-5ea16681081d01ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
关于销毁
在chrome console中输入命令:
app.$destroy();
![](http://upload-images.jianshu.io/upload_images/5873060-f0629e3e5616859e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
生命周期总结:
beforecreate: 例子:可以在这加个loading事件;
created:在这结束loading,还做一些初始化,实现函数自执行;
mounted: 在这发起后端请求,拿回数据,配合路由钩子做一些事情;
beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容。