vue2生命周期钩子函数有哪些

vue 2 提供了 10 个生命周期钩子函数，分别在不同应用程序生命周期阶段执行，包括初始化（beforecreate）、创建（created）、挂载（beforemount、mounted）、更新（beforeupdate、updated）、激活/停用（activated、deactivated）和销毁（beforedestroy、destroyed），允许开发人员在特定时刻自定义应用程序行为，例如初始化数据、操纵 dom、执行动画或清理资源等。

Vue 2 生命周期钩子函数

概述

Vue 2 生命周期钩子函数是在不同应用程序生命周期阶段执行的函数。这些函数允许开发人员在特定时刻自定义应用程序行为，例如在创建、挂载和销毁组件时。

生命周期钩子函数

立即学习“前端免费学习笔记（深入）”；

Vue 2 提供了以下生命周期钩子函数：

1. beforeCreate：在实例初始化后立即执行。
2. created：在实例创建完成后执行。
3. beforeMount：在挂载元素到 DOM 之前执行。
4. mounted：在挂载元素到 DOM 之后执行。
5. beforeUpdate：在更新 DOM 之前执行。
6. updated：在更新 DOM 之后执行。
7. activated：在子组件激活时执行（仅限 keep-alive）。
8. deactivated：在子组件停用时执行（仅限 keep-alive）。
9. beforeDestroy：在销毁实例之前执行。
10. destroyed：在销毁实例之后执行。

作用

生命周期钩子函数用于在以下常见场景中执行操作：

• 初始化数据和方法（created）
• 操纵 DOM（mounted）
• 响应状态变化（beforeUpdate、updated）
• 执行动画或过渡（activated、deactivated）
• 清理资源（beforeDestroy、destroyed）

示例

考虑一个简单的 Vue 组件：

<template><div>{{ message }}</div>
</template><script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  mounted() {
    console.log('Component has been mounted.');
  },
  beforeDestroy() {
    console.log('Component will be destroyed.');
  },
};
</script>

在此示例中：

• created 钩子函数用于初始化 message 数据。
• mounted 钩子函数用于在将组件挂载到 DOM 后记录一条消息。
• beforeDestroy 钩子函数用于在组件被销毁之前记录一条消息。