Vue生命周期和常用的八大生命周期

Vue生命周期

什么是生命周期

1.从Vue实例从创建，运行，到销毁，总是伴随着各种各样的事件，这些事件，统称为生命周期！

常用的八大生命周期 跟data是平级

1.beforeCreate(){}

创建之前data和methods还没有初始化，获取不到data和methods中的数据作用:页面重定向

 beforeCreate() {
    console.log("beforeCreate")
    console.log(this.msg)
  },

2.created() {}

创建之后第一个可以操作data和methods的生命周期
作用:数据初始化，接口请求

 created() {
    console.log("beforeCreate")
    console.log(this.msg)
    this.msg = 'word'
  },

3.beforeMount(){}

创建之前 虚拟DOM挂载

  beforeMount() {
    console.log('beforeMount')
  },

4.mounted(){}

创建之后 真实DOM挂载
第一个可以操作DOM元素的生命周期

  mounted() {
    console.log('mounted')
    document.getElementById('box').style.color='red'
  },

5.beforeUpdate(){}

更新之前，data中的数据是最新的页面中的数据是旧的 ，还未保持同步
作用：执行0次或者无数次

  beforeUpdate() {
    console.log('beforeUpdate')
  },

6.Update(){}

更新之后会 data和页面中的数据都是最新的 已经保存同步

  updated() {
    console.log('updated')
  },

7.beforeDestroy() {}

销毁之前，页面还未销毁
作用：清空定时器和页面监听

  beforeDestroy() {
    console.log('beforeDestroy')
  },

8.destroyed() {}

销毁之后

  destroyed() {
    console.log('destroyed')
  }