Vue生命周期

1. Options API: (vue2)

• 生命周期：从Vue实例创建、运行到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期
• 生命周期钩子 = 生命周期函数 = 生命周期事件
• 主要的生命周期函数分类：
  

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

Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的。
一个功能需要在不同的地方维护，data，methods，computed，watch

生命周期函数：

2. Composition API-基于函数组合的API（Vue3）

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

参考： juejin.cn/post/694560…