vue生命周期理解总结

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)也被渲染加载出来了

⑤beforeUpdate和updated是视图数据更改时候调用，重新刷新界面

⑥beforeDestroy和destroyed在视图销毁时候调用

最后贴上生命周期图示：Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。