[JS][Vue]学习记录之生命周期

demo地址
首先拿官网的一张图镇楼!

vue生命周期
其中红色的函数就是我们需要关注的每个生命周期函数.下面一一解释他们的调用时机:

• beforeCreate:组件还未创建
• create:组件已经创建,但是还没显示
• beforeMount:组件挂载前,但是还没显示,虚拟dom已经配置
• mounted:组件挂载后,此方法执行后才显示
• beforeUpdate:组件更新前,页面还未显示,虚拟dom已经配置
• updated:组件更新后,此方法执行后才显示
• beforeDestroy:组件销毁前
• destroyed:组件销毁

可以在app.vue中验证:

export default {
  name: 'App',
  components: {
      'app-header': header,
      'myComponent': myComponent,
      'app-footer' : footer
  },
  data(){
    // noinspection JSAnnotator
    return {
      users : ["allen","marry","tom"],
      info : '这是一个info'
    }
  },
  methods:{
    update:function (info){
      this.info = info;
    }
  },
  beforeCreate:function (){
    alert("beforeCreate:组件还未创建");
  },
  created:function (){
    alert("create:组件已经创建,但是还没显示");
  },
  beforeMount:function (){
    alert("beforeMount:组件挂载前,但是还没显示,虚拟dom已经配置");
  },
  mounted:function (){
    alert("mounted:组件挂载后,此方法执行后才显示");
  },
  beforeUpdate:function (){
    alert("beforeUpdate:组件更新前,页面还未显示,虚拟dom已经配置");
  },
  updated:function (){
    alert("updated:组件更新后,此方法执行后才显示");
  },
  beforeDestroy:function (){
    alert("beforeDestroy:组件销毁前");
  },
  destroyed:function (){
    alert("destroyed:组件销毁");
  }
}
</script>