vue2生命周期钩子函数有哪些- 技术经验 -卓越飞翔博客

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

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

Vue 2 生命周期钩子函数

概述

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

生命周期钩子函数

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

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

beforeCreate：在实例初始化后立即执行。
created：在实例创建完成后执行。
beforeMount：在挂载元素到 DOM 之前执行。
mounted：在挂载元素到 DOM 之后执行。
beforeUpdate：在更新 DOM 之前执行。
updated：在更新 DOM 之后执行。
activated：在子组件激活时执行（仅限 keep-alive）。
deactivated：在子组件停用时执行（仅限 keep-alive）。
beforeDestroy：在销毁实例之前执行。
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 钩子函数用于在组件被销毁之前记录一条消息。

相关推荐