Vue3.x中的生命周期和钩子函数（部分）

  Vue组件化编程中的生命周期，可以理解为组件在不同时间段能执行的不同的函数，这些函数也叫钩子函数。
  钩子函数伴随着生命周期，是专门暴露给用户的，用来控制生命周期。因此，我们想要理解生命周期，就需要理解钩子函数。
  在Vue3.x中，钩子函数做了一些改动，我们通过下面的例子框架来了解它。

在这里插入图片描述

点击按钮可以更新组件

在这里插入图片描述

setup()

  在创建组件之前执行。

onMounted()

  组件挂在到页面之后执行。

onBeforeUpdate()

  在组件更新之前执行。

onUpdated()

  在组件更新之后执行。

onBeforeUnmount()

  在组件卸载之前执行。

onUnmounted()

  在组件卸载之后执行。

onDeactivated()

  在组件切换中老组件消失的时候执行。

合并一下上面的代码并简单运行一下

运行一下

1. 初始化

   
   
   在这里插入图片描述

2. 点击按钮更新组件
   在这里插入图片描述

特殊的钩子函数onRenderTriggered

  onRenderTriggered函数有一个特殊的功能，会跟踪组件的状态，并且返回一个参数保存这些状态。比如我们以更新组件状态举一个例子：

  点击按钮更新组件，可以看到先执行了onRenderTriggered函数，后执行了onUpdated函数，且onRenderTriggered函数返回了一个对象，其中包含了状态更新的组件的信息。

在这里插入图片描述