当前位置：首页 > article >正文

Vue.js 生命周期概述：组件从诞生到销毁的全过程

article 2025/1/5 4:59:27

在 Vue.js 中，每个组件都有一个生命周期。你可以把它想象成一个人从出生到成长，再到老去的过程。组件也有类似的生命周期阶段，Vue 会在这些阶段提供钩子函数，供我们在合适的时机插入自定义逻辑。

今天，我们就来一起了解 Vue.js 的生命周期，帮助你更好地控制组件的行为。

一、什么是生命周期？

生命周期（Lifecycle）是指一个组件从创建到销毁的过程。Vue 会在这个过程中自动调用一些特殊的函数，叫做“生命周期钩子”。你可以在这些钩子里执行一些操作，比如初始化数据、发送网络请求、清理资源等等。

简而言之，生命周期让你可以在组件的不同阶段插入自定义逻辑。

二、Vue 组件的生命周期

Vue 组件的生命周期可以分为以下几个主要阶段：

创建阶段
在这个阶段，Vue 组件刚刚被创建，所有的数据和状态都还没被挂载到 DOM 上。
挂载阶段
组件已经被挂载到 DOM 上，这时候你可以操作真实的 DOM，执行一些视图更新的操作。
更新阶段
当组件的状态（数据）发生变化时，组件会重新渲染，此时会进入更新阶段。
销毁阶段
当组件被销毁时，Vue 会清理相关资源，比如事件监听、定时器等。

三、生命周期钩子函数

Vue 提供了许多生命周期钩子函数，方便你在不同阶段做一些操作。下面是常用的生命周期钩子函数：

1. `beforeCreate`：组件实例刚创建，数据和事件还没有初始化。

这个钩子函数在 Vue 实例被创建之后、数据观测和事件配置之前被调用。

beforeCreate() {
  console.log('beforeCreate: 数据和事件还未初始化');
}

2. `created`：组件实例创建完成，数据观测、事件设置完成，但还没挂载到 DOM 上。

这个钩子函数在 Vue 实例创建完成后会立即调用，你可以在这里进行一些初始化操作，比如发起数据请求。

created() {
  console.log('created: 数据和事件初始化完成');
}

3. `beforeMount`：模板被渲染成 HTML 之前调用。

此时，模板已经被编译过，但还没有被挂载到真实的 DOM 上。如果你想在渲染前修改一些数据，通常会使用这个钩子。

beforeMount() {
  console.log('beforeMount: 模板渲染之前');
}

4. `mounted`：模板已经被挂载到 DOM 上。

当组件的模板渲染完成后，mounted 钩子会被调用。此时，你可以访问 DOM，执行一些 DOM 操作，或者进行网络请求。

mounted() {
  console.log('mounted: 组件挂载到 DOM 上');
}

5. `beforeUpdate`：当数据变化后，组件重新渲染之前调用。

当数据发生变化并且组件开始重新渲染时，beforeUpdate 钩子会被调用。你可以在这里访问旧的 DOM 状态，进行一些操作。

beforeUpdate() {
  console.log('beforeUpdate: 数据发生变化，组件即将重新渲染');
}

6. `updated`：组件重新渲染之后调用。

数据更新后，DOM 重新渲染完毕，updated 钩子会被调用。你可以在这里执行一些需要在视图更新后进行的操作。

updated() {
  console.log('updated: 组件渲染完成');
}

7. `beforeDestroy`：组件销毁之前调用。

当组件即将被销毁时，beforeDestroy 钩子会被调用。你可以在这里做一些清理工作，比如移除事件监听器、清理定时器等。

beforeDestroy() {
  console.log('beforeDestroy: 组件销毁前');
}

8. `destroyed`：组件销毁之后调用。

当组件完全销毁后，destroyed 钩子会被调用。此时，组件的所有事件监听器、子组件和 DOM 都已经被清理。

destroyed() {
  console.log('destroyed: 组件销毁后');
}

四、完整的生命周期流程图

生命周期钩子的调用顺序是有固定流程的，通常包括：

创建阶段：beforeCreate -> created
挂载阶段：beforeMount -> mounted
更新阶段：beforeUpdate -> updated
销毁阶段：beforeDestroy -> destroyed

你可以把这个流程看作是组件的一生，从诞生到消失。每个钩子函数都会在适当的时机被调用，让你能在合适的时刻插入自己的逻辑。

五、如何使用生命周期钩子

在 Vue 组件中，我们可以直接在组件的选项对象里定义这些生命周期钩子。例如：

export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  created() {
    console.log('组件创建完成，可以进行数据请求等操作');
  },
  mounted() {
    console.log('组件挂载完成，可以进行 DOM 操作');
  },
  updated() {
    console.log('组件更新完成');
  },
  beforeDestroy() {
    console.log('组件销毁前，可以清理资源');
  }
};