【Vue】Vue生命周期

先来一张官网生命周期图

我们在用代码来测试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中我们也可以做数据的获取