vue3的生命周期

生命周期阶段	钩子函数 (选项式 API)	钩子函数 (组合式 API)	执行时机与常见用途
​​创建​​	beforeCreate, created	在 setup()函数中编写代码	组件实例初始化响应式数据。​​常用于数据初始化、发起异步请求​​。组合式 API 中 setup()替代了这两个钩子。
​​挂载​​	beforeMount	onBeforeMount	模板编译完成，但尚未将组件挂载到 DOM。​​使用较少​​，多见于服务端渲染。
	mounted	onMounted	组件已被挂载到 DOM，可访问 DOM 元素。​​常用于操作 DOM、初始化第三方库（如图表、地图）​​。
​​更新​​	beforeUpdate	onBeforeUpdate	响应式数据变化后，虚拟 DOM 重新渲染​​前​​。可获取更新前的 DOM 状态。
	updated	onUpdated	虚拟 DOM 重新渲染并打补丁后，组件 DOM 已更新。​​注意：避免在此修改状态，可能引发无限循环更新​​。
​​卸载​​	beforeUnmount	onBeforeUnmount	组件实例卸载​​前​​，实例仍完全可用。​​核心清理阶段，用于清除定时器、取消网络请求、解绑自定义事件​​。
	unmounted	onUnmounted	组件实例卸载​​后​​，所有子组件也已销毁。用于执行最终的清理操作。

代码示例如下：

<template>
  <div class="demo-component">
    <h2>当前计数: {{ count }}</h2>
    <button @click="increment">+1</button>
    <button @click="destroyComponent">卸载组件</button>
  </div>
</template>

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

// 响应式数据
const count = ref(0)
const isDestroyed = ref(false)

// 方法
const increment = () => {
  count.value += 1
}

const destroyComponent = () => {
  isDestroyed.value = true
}

// 生命周期钩子
console.log('setup: 组件开始创建，在 beforeCreate 和 created 之前执行[4,10](@ref)')

onBeforeMount(() => {
  console.log('onBeforeMount: 组件挂载到DOM前[1,3](@ref)')
})

onMounted(() => {
  console.log('onMounted: 组件已挂载，可访问DOM[1,3](@ref)')
  // 常用于初始化第三方库、发起AJAX请求[3,5](@ref)
})

onBeforeUpdate(() => {
  console.log('onBeforeUpdate: 数据更新前，DOM尚未重新渲染[1,6](@ref)')
})

onUpdated(() => {
  console.log('onUpdated: 数据更新后，DOM已重新渲染[1,6](@ref)')
  // 避免在此钩子中修改状态，可能导致无限循环更新[6](@ref)
})

onBeforeUnmount(() => {
  console.log('onBeforeUnmount: 组件卸载前，实例仍完全可用[3,5](@ref)')
  // 在此进行清理工作，如清除定时器、取消请求[3,5](@ref)
})

onUnmounted(() => {
  console.log('onUnmounted: 组件已卸载[1,3](@ref)')
})
</script>