生命周期

钩子函数

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

  • onBeforeMount：在组件被挂载到DOM之前调用。这个阶段是在模板和数据被渲染成HTML之前，可以用来执行如数据预处理的操作。

  • onMounted：在组件挂载完成后调用。这个阶段DOM已经形成，可以执行DOM操作或发送异步请求。

  • onBeforeUpdate：在响应式数据发生变化，且组件重新渲染之前调用。可以用来获取更新前的DOM状态。

  • onUpdated：在组件的虚拟DOM重新渲染并应用更新后调用。此时可以执行依赖于DOM的操作，如操作滚动位置或执行动画。

  • onBeforeUnmount：在组件销毁之前调用。用于执行清理操作，如移除事件监听器或取消定时器。

  • onUnmounted：在组件完全销毁后调用。这时，所有的子组件和事件监听器都已被清理，可以确保不会造成内存泄漏。

  • onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行。

Vue2.x 和 Vue3.x 生命周期对比

例子

一个典型的应用场景是在组件挂载时从服务器获取数据。例如，我们可以在mounted钩子中发送一个API请求来获取数据，然后渲染到组件中。

下面是一个简单的示例，展示如何在组件的生命周期钩子中执行任务。

<template>
  <div>{{ message }}</div>
</template>
<script setup>
  import { onMounted, ref } from 'vue';
  const message = ref('');
  onMounted(async () => {
    const response = await fetch('https://api.example.com/data');
    message.value = await response.json();
  });
</script>

上述示例中，在onMounted钩子中处理组件挂载后的逻辑，进行API调用并更新了组件数据。