1.

官网：https://vue3js.cn/docs/zh/guide/composition-api-lifecycle-hooks.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
image.png

image.png
示例
image.png

2.生命周期详解

1.beforeCreate与created 包含在setup中了

（beforeCreate用来初始化和响应数据的，在其中不能访问任何方法与数据，因为还未初始化完成）
此处可以请求接口，拿传来的数据之类的

2.onbeforeMount

在组件渲染和挂载前使用

3.onMounted

此时dom已经渲染和挂载完成，可以访问数据与方法了

4.onbeforeUpdate

在数据已经更新，但是实际页面还未更新的阶段

5.onUpdate

updated方法在DOM更新后调用一次

6.distory变成了unMounted

在before阶段还没清理，数据事件还能访问到，在此处可以打印一下
在此处清除定时器与监听

7.keep-alive

（vue的内置组件）实际上就是一个缓存，可以避免重新渲染
用在组件上就是：

  1. <keep-alive>
  2.   <component>
  3.     <!-- 该组件将被缓存！ -->
  4.   </component>
  5. </keep-alive>

而该组件存在两个生命周期

1.onActivated()
如果我们使用keep-alive管理不同的tab视图，每次我们切换tab时，当前的tab将会触发activated钩子。

  1.  setup() {
  2.     onActivated(() => {
  3.        console.log('Tab 1 Activated')
  4.     })
  5.  }

2.**onDeactivated()**
此处可以缓存下用户数据和触发动画，（切换tab页面时）