Vue3 的生命周期函数

        Vue3 的生命周期函数包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount 和 unmounted，其中一些生命周期函数和 Vue2 的相同，但是有一些新的函数被加入

        Vue3 的生命周期及作用：

1. beforeCreate：在 Vue 实例创建之前执行，此时实例的数据观测和事件机制都尚未初始化，无法访问到 this 实例。
2. created：在 Vue 实例创建之后执行，此时已经完成了数据观测和事件机制的初始化，可以访问到 this 实例。
3. beforeMount：在挂载元素之前执行，此时模板编译已完成，但是尚未挂载到页面中。
4. mounted：在挂载元素之后执行，此时实例已经挂载到页面上，可以访问到渲染后的DOM元素，可以在这个生命周期函数中进行DOM操作。
5. beforeUpdate：在响应式数据更新之前执行，此时数据还没有更新，但是DOM已经更新，可以在这个生命周期函数中获取更新前的DOM状态。
6. updated：在响应式数据更新之后执行，此时数据和DOM都已经更新完成，可以在这个生命周期函数中进行DOM操作。
7. beforeUnmount：在实例销毁之前执行，此时实例还没有被销毁，但是可以访问到实例中的数据和方法。
8. unmounted：在实例销毁之后执行，此时实例已经被销毁，不能再访问到实例中的数据和方法

除了以上的生命周期函数，Vue3 还引入了两个新的函数：

1. beforeUnmount：在组件卸载之前执行，与 beforeDestroy 的作用相同，但是更加明确表达组件卸载的时机。
2. onRenderTracked 和 onRenderTriggered：这两个函数主要用于调试和性能分析，分别在每个渲染周期中被调用。onRenderTracked 会在渲染周期中追踪依赖项，onRenderTriggered 会在依赖项被触发时被调用

什么是Composition API

        Vue3 Composition API 附带了一个 setup() 方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等，Composition API使我们能够更好地将代码组织为更多的模块化功能，而不是根据属性的类型（方法，计算的数据）进行分离

        在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此，我们不再需要这两个钩子，我们可以简单地将本应有的代码放在 setup() 方法中 

添加生命周期钩子

import { onMounted, onUpdated, onUnmounted } from 'vue'

        除去 beforeCreate 和 created 之外，在我们的 setup 方法中，有9个旧的生命周期钩子，我们可以在setup 方法中访问 

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted
• onActivated
• onDeactivated
• onErrorCaptured

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
      // ... 
    })
  }
}

从Vue2转换到Vue3

        Vue2到Vue3的生命周期映射直接来自于Vue3 Composition API 文档，我认为这是一种最有用的方式来查看事情将如何变化，以及我们如何使用它们

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

新的调试钩子函数

Vue3中使用两个全新的钩子函数来进行调试。他们是：

• onRenderTracked
• onRenderTriggered

        两个事件都带有一个DebuggerEvent，它能够知道是什么导致了Vue实例中的重新渲染

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖项导致组件重新呈现
  }
}