10分钟看懂vue生命周期

什么是生命周期?

简而言之：从生到死的过程,从Vue实例创建-运行-销毁的过程
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程

• 创建期间生命周期方法
  beforeCreate:
created:
beforeMount
mounted
• 运行期间生命周期方法
  beforeUpdate
updated
• 销毁期间的生命周期方法
  beforeDestroy
destroyed

图示

代码

<template>
  <div>
    <div id="msg">{{msg}}</div>
  </div>
</template>

<script>
  export default {
    name: 'vue生命周期',
    data () {
      return {
        msg: '我是谁？我在那？'
      }
    },
    methods: {
      myMethods (val) {
        console.log("我是methods，我什么时候出来？答案是===" + val);
      }
    },
    beforeCreate () {
      // 执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,el/data/methods都没有初始化
      // 执行方法会报错
      console.group('beforeCreate 创建前状态===============》');
      console.log("%c%s", "color:red" , "el  :" + this.$el); //undefined
      console.log("%c%s", "color:red",  "data:" + this.$data); //undefined
      console.log("%c%s", "color:red" , "msg :" +  this.msg) // undefined
     // this.myMethods('beforeCreate') // Error in beforeCreate hook: "TypeError: this.myMethods is not a function"
    },
    created () {
      // 执行created的时候,表示Vue实例已经初始化好了部分内容,el/data/methods
      // 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
      console.group('created 创建完毕状态===============》');
      console.log("%c%s", "color:red","el  :" + this.$el); //undefined
      console.log("%c%s", "color:red","data:" + this.$data); //已被初始化
      console.log("%c%s", "color:red","msg :" + this.msg); //已被初始化
      this.myMethods('created') //已被初始化
    },
    beforeMount () {
      // 执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上
      console.group('beforeMount 挂载前状态===============》');
      console.log("%c%s", "color:red","el  :" + this.$el); //undefined
      console.log("%c%s", "color:red","data:" + this.$data); //已被初始化
      console.log("%c%s", "color:red","msg :" + this.msg); //已被初始化
    },
    mounted () {
      // 执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了
      console.group('mounted 挂载结束状态===============》');
      console.log("%c%s", "color:red","el  :" + this.$el.innerHTML); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data:" + this.$data); //已被初始化
      console.log("%c%s", "color:red","msg :" + this.msg); //已被初始化
    },
    beforeUpdate () {
      // 主要data中的数据发生了变化就会执行
      // 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el  :" + this.$el.innerHTML);
      console.log(this.$el);
      console.log("%c%s", "color:red","data:" + this.$data);
      console.log("%c%s", "color:red","msg :" + this.msg);
    },
    updated () {
      // 主要data中的数据发生了变化就会执行
      // 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el  :" + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data:" + this.$data);
      console.log("%c%s", "color:red","msg :" + this.msg);
    },
    beforeDestroy () {
      // 执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用,
      // 最后能使用Vue实例的地址
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el  :" + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data:" + this.$data);
      console.log("%c%s", "color:red","msg :" + this.msg);
    },
    destroyed () {
      // 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el  :" + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data:" + this.$data);
      console.log("%c%s", "color:red","msg :" + this.msg)
    }

  }
</script>

控制台信息