一、生命周期：Vue2 与 Vue3 对比

vue2           ------->      vue3

vue生命周期钩子函数常用的有8个(实例创建–>挂载–>更新–>销毁)
beforeCreate   -------->      setup(()=>{})      vue实例创建前
created        -------->      setup(()=>{})      创建前
beforeMount    -------->      onBeforeMount(()=>{})      挂载前
mounted        -------->      onMounted(()=>{})      挂载后
beforeUpdate   -------->      onBeforeUpdate(()=>{})      更新前
updated        -------->      onUpdated(()=>{})      更新后
beforeDestroy  -------->      onBeforeUnmount(()=>{})      销毁前
destroyed      -------->      onUnmounted(()=>{})      销毁后

注意：还有另外3个生命周期函数
activated      -------->   onActivated(()=>{})      组件在被keep-alive 激活后触发
deactivated    -------->   onDeactivated(()=>{})      组件被keep-alive 停用缓存后触发
errorCaptured  -------->   onErrorCaptured(()=>{})      子组件出错会调用这个生命周期函数

二、Vue3中的生命周期

注意：vue3 组合式API 是没有 beforeCreate 和 created 这两个生命周期，使用setup()来替代

1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 在组件DOM实际渲染安装之前调用。在这一步，根元素还不存在;

3、onMounted() : 在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问;

4、onBeforeUpdate(): 数据更新时调用，发生在虚拟 DOM 打补丁之前;

5、onUpdated(): DOM更新后，updated 的方法即会调用;

6、onBeforeUnmount(): 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的;

7、onUnmounted(): 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载;

8、onActivated(): 被包含在 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

<script setup lang='ts'>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

console.log('setup');

// 创建前
onBeforeMount(() => {
  console.log('创建前====>');
})
// 创建完成
onMounted(() => {
  console.log('创建完成====>');
})
// 更新前
onBeforeUpdate(() => {
  console.log('更新前====>');
})
// 更新完成 
onUpdated(() => {
  console.log('更新完成====>');
})
// 卸载前
onBeforeUnmount(() => {
  console.log('卸载前====>');
})
// 卸载完成
onUnmounted(() => {
  console.log('卸载完成====>');
})
</script>

三、部分生命周期功能

1、可以在 created/setup() 或者 mounted 中发送 http、ajax 等 请求，created/setup() 比 mounted 执行的时间更早，所以一般在 created/setup() 中发送 ajax 请求；

2、对于 created/setup() 生命周期钩子函数，mounted 可以获取或操作dom元素 ，若获取不到，可以用 this.$nextTick() 来获取页面渲染完成后的 dom 元素