vue生命周期
2019-02-28 本文已影响0人
sunflower_07
vue的生命周期就是从，创建到销毁，有8个，分别是：创建前(beforeCreate)、创建完成(create)、挂载前(beforeMount)、挂载后(mounted)、更新前(beforeUpdate)、更新后(update)、销毁前(beforeDestroy)、销毁后(destroyed)
lifecycle.png
先看一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
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(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(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</html>
- 在创建前状态（beforeCreate） ,这个时候
el ：undefind;
data:undefind;
message:undefind; 都是undefind;
2.创建完成（Create）
el:undefind;
data:[object object];
message: vue的生命周期
3.挂载前（beforeMount）
el:<div id="app"></div>;
data:[object object];
message: 页面的message 已经改变为{{message}}进行占位
4.挂载后 （mounted）
el:<div id="app"></div>;
data:[object object];
message: 页面的message 已经变化成Vue的生命周期
- 更新前（beforeUpdate）
如果程序计算数据有变化时调用
6.更新（update）
页面数据已更新成最新数据
7.销毁前( beforeDestroy)
释放vue对象之前调用，beforeDestroy 钩子，
这个时候实例依然可用
8.销毁完成（destroyed）
destroyed 钩子成功运行之后，vue实例指令的所有东西，都会解绑，所有事件也都会被移除，所有的实例也都会被销毁
这目前是个人对vue的生命周期的理解，如果有更好的理解，请多多赐教，日后并加以修改，谢谢。
