目录
扫描二维码关注公众号,回复:
8509142 查看本文章
-
Vue生命周期
-
生命周期示意图 - Vue life
前言:VUE实例在整个生命周期中自动挂在了很多的生命周期钩子(回调函数),在这些回调函数中可以访问VUE的属性方法来完成操作。生命周期示意图
-
生命周期钩子 - Vue life stage
-
生命周期钩子
-
生命钩子 demo
<!DOCTYPE html>
<html>
<head>
<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 : "hello vue,this is life"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:blue" , "el : " + this.$el); //undefined
console.log("%c%s", "color:blue","data : " + this.$data); //undefined
console.log("%c%s", "color:blue","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:blue","el : " + this.$el); //undefined
console.log("%c%s", "color:blue","data : " + this.$data); //已被初始化
console.log("%c%s", "color:blue","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:blue","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:blue","data : " + this.$data); //已被初始化
console.log("%c%s", "color:blue","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:blue","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:blue","data : " + this.$data); //已被初始化
console.log("%c%s", "color:blue","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:blue","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:blue","data : " + this.$data);
console.log("%c%s", "color:blue","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:blue","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:blue","data : " + this.$data);
console.log("%c%s", "color:blue","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:blue","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:blue","data : " + this.$data);
console.log("%c%s", "color:blue","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:blue","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:blue","data : " + this.$data);
console.log("%c%s", "color:blue","message: " + this.message)
}
})
</script>
</body>
</html>
-
生命钩子解析
- beforeCreate:仅仅是一个空的实例
- created:数据data和数据信息message都已经有了,创建vue完毕并且调用,但是还没有挂载元素不存在
- beforeMount:vue数据和绑定元素都有了等所有信息都准备好了,等待挂载
- mounted:挂载完成并且替换
- beforeUpdate:略~
- updated:略~
- beforeDestroy:略~
- destroyed:略~
以上就是一个回调函数,我也讲不清楚上面的,https://blog.csdn.net/jiang7701037/article/details/83118665 转到这里看吧。
实例展示生命周期各个
-
实例展示生命周期各个阶段