在Vue中,生命周期的理解与否是非常重要的(我朋友说的:) )
然后我就去看了看了vue官网的视频,得知vue生命周期的主要作用:方便我们在程序运行的各个阶段加如我们想要加入的代码;
1.beforeCreate: 创建前状态;——————>在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. /*data observer:数据观察员 ; event/watcher : 事件/观察者 */
2.created: 创建完毕状态;——————>在实例创建完成后立即调用. 在这一步实例已经完成以下配置,数据观测(data observer),属性和方法的运算,watch/event 事件回调;
但是,挂载阶段还没开始呢,$el属性目前不可见!
3.beforeMount: 挂载前状态;———————>在挂载开始之前被调用:相关渲染函数首次被调用
4.mounted:挂载结束状态;————————>el被新创建的vm.$el替换,挂载成功;
5.beforeUpdate:数据更新时调用;
6. updated:组件DOM已经更新,组件更新完毕
7.setTimeout(function(){
vm.msg='更新message数据';
},3000)
在3秒钟之后更改message的值;
实例图:
代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{message}}
</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>
仅作为记录之用;我也要去试试详细的实现了