1. 创建前后 - setup

1.1 作用

替代 vue2 中的 onBeforeCreate 和 onCreated，分别在组件被创建之前和完成时调用

2. 挂载前后 - onBeforeMount / onMounted

2.1 作用

挂载之前（onBeforeMount），不能获取到 DOM 元素（undefined）
挂载完成（onMounted），可以获取到 DOM 元素

3. 更新前后 - onBeforeUpdate / onUpdated

3.1 作用

更新之前（onBeforeUpdate），获取到的是旧内容
更新完成（onUpdated），获取到的是新内容

4. 卸载前后 - onBeforeUnmount / onUnmounted

4.1 作用

卸载之前（onBeforeUnmount），作一些解绑事件、取消订阅、清除定时器等操作
卸载完成（onUnmounted），组件完全销毁

4.2 注意

如果在组件标签上使用的是 v-if，则会触发组件的卸载操作；
而 v-show 则不能直接作用于组件标签上，需要为组件标签包裹一个外层标签，然后作用在外层标签上

5. 收集依赖 - onRenderTracked

5.1 作用

收集依赖，在 onBeforeMount 和 onMounted 之间触发
有一个响应式数据，就收集一次，onRenderTracked 就触发一次

5.2 用法

接收一个 event，是一个 effect 对象，type 为 get

onRenderTracked((e) => {
    console.log("收集依赖 ===> ", e)  // 收集依赖 ===>  {effect: ReactiveEffect, target: RefImpl, type: 'get', key: 'value'}
})

6. 更新依赖 - onRenderTriggered

6.1 作用

更新依赖，在 onBeforeUpdate 和 onUpdated 之前触发
有一个响应式数据变化，就更新一次，onRenderTriggered 就触发一次

6.2 用法

接收一个 event，是一个 effect 对象，type 为 set

onRenderTriggered((e) => {
    console.log("更新依赖 ===> ", e)  // 更新依赖 ===>  {effect: ReactiveEffect, target: RefImpl, type: 'set', key: 'value', newValue: '新内容'}
})

7. getCurrentInstance

7.1 作用

返回一个当前组件实例，可以查看生命周期是否挂载上去了

7.2 用法

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
console.log(instance)  // {uid: 1, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}