vue2和vue3生命周期详解

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

对于Vue2：

data() {
  return {
    msg: '8:00',
  }
},
methods: {
  show() {
    console.log('执行了show方法');
  },
  changeMsg() {
    this.msg = '9:00'
  }
}

主要的生命周期函数分类：

• 创建期间的生命周期函数：

       beforeCreate:此时实例刚在内存中被创建出来，此时还没有初始化好data，mothods属性

//这是第一个生命周期函数，表示实例完全被创建出来之前会执行它
//在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化
beforeCreate(){
    console.log(this.msg);
    this.show()
    
}

       created：实例已经在内存中创建好，data，mothods也已经创建好，但是还没有开始编译模板

//在created中，data和methods都已经初始化好了
//如果想要调用methods里的方法，或者给data里面的数据赋值，最早只能在created方法里面
created(){
    console.log(this.msg);
    this.show()
    
}

       

       beforeMount:此时模板已经编译好了，但是还没有挂载到页面指定的容器中显示

beforeMount() {
    //这是第三个生命周期函数，表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中
    console.log(document.getElementById('page'));
  },

     

 mounted：此时已经将编译好的模板，挂载到页面指定的容器中显示

mounted() {
    // 这是第四个生命周期函数，表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
    console.log(document.getElementById('page'));
  }

• 运行期间的生命周期函数：

        beforeUpdate:状态更新前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点

beforeUpdate() {
    //这时候，表示界面还没有被更新，但是数据已经更新了
    console.log('界面上元素的内容：' + document.getElementById('page').innerText)
    console.log('data中msg数据是' + this.msg)
  },

       

        updated:实例更新完毕之后调用此函数，此时data的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了

updated() {
    //这时候，界面和数据都更新
    console.log('界面上元素的内容：' + document.getElementById('page').innerText)
    console.log('data中msg数据是' + this.msg)
  }

• 销毁期间的生命周期函数：

        beforeDestory:实例销毁之前调用，此时，实例仍完全可用

        destroyed:Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

 对于Vue3：

beforeCreate   >      setup(）
created        >      setup()
beforeMount    >      onBeforeMount
mounted        >      onMounted
beforeUpdate   >      onBeforeUpdate
updated        >      onUpdated
beforeDestroy  >      onBeforeUnmount
destroyed      >      onUnmounted