vue生命周期

vue生命周期

1.什么是生命周期？

生命周期就是vue实例或者组件从创建到使用，最后到销毁的整个过程

2.生命周期函数的分类

• 创建期间
  beforeCreate: 实例刚在内存中被创建出来，此时还没有初始化好的data和methods
  created： 实例已经在内存中创建OK，此时data和methods已经创建OK，还没有开始编译模板
  beforeMount： 此时已经完成了模板的编译，但是还没有挂载到页面当中
  mounted： 此时，已经将编译好的模板挂载到了页面指定的容器中显示
• 运行期间
  beforeUpdate: 状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
  updated: 实例更新完毕之后调用此函数，此时data中的状态和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
• 销毁期间
  beforeDestroy: 实例销毁之前调用，在这一步实例仍然完全可用
  destroy: Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听都会被移除，所有的子实例也会被销毁

3.简单记忆

1. 创建期间
   beforeCreate() data和methods中数据未初始化
   created() data和methods准备好了，但是还拿不到DOM元素
   beforeMount() 模板在内存中编辑完成，但是还未渲染到页面
   mounted() 实例完全被创建完毕
2. 运行期间
   beforeUpdate() data中数据更新了，但是页面上还未更新
   updated() 页面和data中的数据已经同步并且都是最新的
3. 销毁期间
   beforeDestroy() 实例销毁前调用
   destroy() 实例销毁后调用