Vue3组件的生命周期

Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子。

生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁。

1. Vue2的生命周期函数

Vue2中有4生命周期阶段，8个生命周期函数（又叫生命周期钩子）

（1）创建阶段：beforeCreate、created

（2）挂载阶段：beforeMount、mounted

（3）更新阶段：beforeUpdate、updated

（4）销毁阶段：beforeDestroy、destroyed

2. Vue3的生命周期函数

2.1 Vue3生命周期函数

（1）创建阶段：setup

（2）挂载阶段：onBeforeMount、onMounted

（3）更新阶段：onBeforeUpdate、onUpdated

（4）卸载阶段：onBeforeUnmount、onUnmounted

常用的钩子：onMounted、onUpdated、onBeforeUnmount

2.2 Vue3生命周期图示

2.3 onMounted

onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码。

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

 2.4 onUpdated

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

<script setup>
import { ref, onUpdated } from 'vue'

const count = ref(0)

onUpdated(() => {
  // 文本内容应该与当前的 `count.value` 一致
  console.log(document.getElementById('count').textContent)
})
</script>

<template>
  <button id="count" @click="count++">{{ count }}</button>
</template>

2.5 onBeforeUnmount

注册一个钩子，在组件实例被卸载之前调用。

function onBeforeUnmount(callback: () => void): void