组件生命周期

图解生命周期

代码各个阶段

var myVue=new Vue({
  el:"#app-8",
  data:{
    data:"aaaaa",
    info:"nono"
  },
  //数据没有 元素没有
  beforeCreate:function(){
    console.log("创建前========")
    console.log(this.data)
    console.log(this.$el)
  },
  //数据有 元素没有
  created:function(){
    console.log("已创建========")
    console.log(this.info)
    console.log(this.$el)
  },
  //数据有 元素有 虚拟dom
  beforeMount:function(){
    console.log("mount之前========")
    console.log(this.info)
    console.log(this.$el)
  },
  //数据有 元素有，真实dom
  mounted:function(){
    console.log("mounted========")
    console.log(this.info)
    console.log(this.$el)
  },
  beforeUpdate:function(){
    console.log("更新前========");
  },
  updated:function(){
    console.log("更新完成========");
  },
  beforeDestroy:function(){
    console.log("销毁前========")
    console.log(this.info)
    console.log(this.$el)
  },
  destroyed:function(){
    console.log("已销毁========")
    console.log(this.info)
    console.log(this.$el)
  }
})

使用建议

• beforeCreate :加载loading事件
• created :结束loading，还做一些初始化，实现函数自执行
• mounted :在这发起axios请求，拿回数据，配合路由钩子做一些事情
• beforeDestory： destoryed :当前组件已被删除，清空相关内容
  综上：建议你吧页面进入出现加载框写在beforeCreate,请求接口数据写在created