vue3从精通到入门12：vue3的生命周期

生命周期：

生命周期钩子主要包括：

1. beforeCreate：组件实例被创建之前调用。在这个阶段，组件的 props 和 data 还未被初始化。
2. created：组件实例创建完成后调用。在这个阶段，组件的 props 和 data 已经被初始化，但 DOM 还未挂载。
3. beforeMount：组件的模板编译和虚拟 DOM 已经创建，但尚未挂载到真实 DOM 上。
4. mounted：组件已经挂载到真实 DOM 上，可以访问和操作 DOM 元素。
5. beforeUpdate：组件的响应式数据发生变化，但尚未重新渲染和更新 DOM。
6. updated：组件已经重新渲染和更新 DOM。
7. beforeUnmount：组件实例被销毁之前调用。在这个阶段，组件仍然完全可用。
8. unmounted：组件实例已经被销毁，组件的所有功能都已失效。

初始化阶段

setup：

这是 vue 3 引入的新生命周期钩子，在 beforeCreate 和 created 钩子之前调用。setup 函数接收两个参数：props 和 context（包含 attrs、slots、emit 等）。在 setup 中，你可以使用 ref 和 reactive 来创建响应式状态，并且可以直接访问组件的 props。

beforeCreate

在组件实例创建之前调用。此时，组件的 props 和 data 还未被观察和初始化。在 setup 钩子之后调用。

created

组件实例创建完成后调用。在这个阶段，组件的 props 和 data 已经被观察和初始化，但 DOM 还未挂载。可以在这里执行一些不需要 DOM 的初始化操作。

挂载阶段

beforeMount

在组件的模板编译和虚拟 DOM 已经创建，但尚未挂载到真实 DOM 上之前调用。

mounted

组件已经挂载到真实 DOM 上，可以访问和操作 DOM 元素。通常在这里执行一些初始的 DOM 操作或第三方库的初始化。

更新阶段

beforeUpdate

组件的响应式数据发生变化，但尚未重新渲染和更新 DOM 之前调用。可以在这里访问组件更新前的状态。

updated

组件已经重新渲染和更新 DOM 之后调用。当需要基于新的 DOM 状态执行操作时，可以在这里进行。

卸载阶段

beforeUnmount

组件实例被销毁之前调用。在这个阶段，组件仍然完全可用，但即将被卸载。可以在这里执行一些清理操作，如取消计时器、移除事件监听器等。

unmounted

组件实例已经被销毁，组件的所有功能都已失效。在这个阶段，无法再访问组件实例或任何其状态。

错误处理

errorCaptured

当组件或其后代组件发生错误时调用。这个钩子可以用于错误处理和报告。

注意事项

• 在 Vue 3 中，beforeDestroy 和 destroyed 钩子已被重命名为 beforeUnmount 和 unmounted。
• setup 钩子在组件的 beforeCreate 和 created 生命周期钩子之间执行，因此它提供了一个更早的时机来设置响应式状态和执行其他初始化逻辑。
• 由于 setup 函数在 beforeCreate 和 created 之前调用，因此你不能在 setup 中访问 this，因为组件实例尚未创建。

<template>  
  <div>  
    <p>Count: {{ count }}</p>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { ref, onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate } from 'vue';  
  
// 定义响应式数据  
const count = ref(0);  
  
// 定义方法  
function increment() {  
  count.value++;  
}  
  
// 在组件挂载之前执行  
onBeforeMount(() => {  
  console.log('Component is about to be mounted!');  
  // 这里可以执行一些在组件挂载之前的逻辑，例如数据初始化或条件检查  
});  
  
// 在组件挂载后执行  
onMounted(() => {  
  console.log('Component has been mounted!');  
  // 这里可以执行需要在组件挂载后进行的操作，比如获取数据、添加事件监听器等  
});  
  
// 在组件更新之前执行  
onBeforeUpdate(() => {  
  console.log('Component is about to be updated!');  
  // 在这里可以执行一些在组件更新之前的逻辑，比如取消之前的操作或收集更新前的状态  
});  
  
// 在组件更新后执行  
onUpdated(() => {  
  console.log('Component has been updated!');  
  // 在这里可以执行需要在组件更新后进行的操作，比如重新计算布局、更新 DOM 等  
});  
  
// 在组件卸载前执行  
onUnmounted(() => {  
  console.log('Component has been unmounted!');  
  // 在这里执行组件卸载前的清理工作，比如清除定时器、移除事件监听器等  
});  
</script>  
  
<style scoped>  
div {  
  margin-bottom: 10px;  
}  
</style>