先来一张官网生命周期图
我们在用代码来测试vue中的声明周期
mounted(){
console.log('-----mounted-----');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
beforeMount(){
console.log('-----before mount-----');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
beforeCreate() {
console.log('-----before create-----');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
created() {
console.log('-----created-----');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
}
可以看到
- 在beforemount之前,dom元素都没有被创建出来,在这个期间我们一般不做事情
- 从created开始,数据和data中的数据绑定完成,这里我们可以做初级的数据获取
- beformount之后,el元素被创建出来,接着mount(挂载)到真实dom上,在mounted中我们就看到已经完成了挂载
- 在mounted中我们也可以做数据的获取