vue生命周期理解总结(✊)
由于近期面试老是会问到生命周期,以及父子组件渲染和销毁的顺序问题,所以空闲时间决定自己用代码测试一下,加深自己对这个的理解。希望对你们也有所帮助
vue生命周期到底发生了什么
废话不多说,直接上 代码
。
// An highlighted block
data() {
return {
message: '兄弟们好啊,我是data数据'
}
},
methods:{
test(){
console.log("兄弟们好啊,我是methods方法,我被调用了")
}
},
beforeCreate() {
console.log("beforeCreate " + this.message);
this.test()
console.log(this.$el);
},
created() {
console.log("created " + this.message);
this.test()
console.log("created " + this.methods);
},
beforeMount() {
console.log("beforeMount " + this.message);
this.test()
console.log(this.$el);
},
mounted() {
console.log("mounted" + this.message);
this.test()
console.log(this.$el);
},
beforeUpdate() {
console.log("beforeUpdate"+this.message);
this.test()
console.log(this.$el);
},
updated() {
console.log("updated"+this.message);
this.test()
console.log(this.$el);
},
beforeDestroy() {
console.log("beforeDestroy"+this.message);
this.test()
console.log(this.$el);
},
destroyed() {
console.log("destroyed"+this.message);
this.test()
console.log(this.$el);
},
代码测试结果
下面我讲解下过程发生了什么、
由测试结果可以看出来
①beforeCreate的时候
data和methods里面数据和函数方法都没有初始化,所以调用失败,dom tree ($el)也没开始初始化
②Create的时候
data和methods都已经初始化完毕,可以进行调用,但是dom tree ($el)也没开始初始化
③beforeMount的时候
data和methods里面数据和函数方法可以进行调用,但是dom tree ($el)也没开始初始化
④mounted的时候
data和methods里面数据和函数方法可以进行调用,,dom tree($el)也被渲染加载出来了